/* ============================================================
   ABRAF GOLD — shared design system  (forest green + beige)
   Used by every page. World-class, animated, video-ready.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&display=swap");

:root{
  --green-950:#0B1310; --green-900:#111C17; --green-800:#18271F; --green-700:#22392E;
  --green-line:rgba(227,201,136,.18);
  --beige:#F4F0E6; --beige-2:#EAE3D2; --beige-3:#DFD5BD;
  --ink:#1E2520; --ink-2:#5F685F;
  --gold:#C9A14A; --gold-2:#E3C988; --gold-dim:#8F7434;
  --serif:"Cormorant Garamond","Didot",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tr:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--beige);line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
/* one uniform content width across nav, every section, grids and footer
   so all left/right edges line up down the whole page */
.wrap{max-width:1280px;margin:0 auto;padding:0 26px}
.wrap-wide{max-width:1280px;margin:0 auto;padding:0 26px}
@media(max-width:640px){.wrap,.wrap-wide{padding:0 18px}}
h1,h2,h3,.serif{font-family:var(--serif)}

/* ---------- PRELOADER ---------- */
#preloader{position:fixed;inset:0;z-index:3000;background:var(--green-950);display:flex;align-items:center;justify-content:center;transition:opacity .9s var(--tr),visibility .9s}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
body.loading{overflow:hidden}
.pl-inner{width:min(560px,86vw);text-align:center}
.pl-logo{height:52px;width:auto;margin:0 auto 30px;filter:drop-shadow(0 8px 28px rgba(201,161,74,.35))}
.pl-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(227,201,136,.22);box-shadow:0 40px 110px rgba(0,0,0,.55)}
.pl-frame img{width:100%;height:auto;display:block;clip-path:inset(0 100% 0 0)}
.pl-frame .ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;filter:grayscale(1);clip-path:none;z-index:-1}
.pl-edge{position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent,var(--gold-2),transparent);box-shadow:0 0 22px 4px rgba(227,201,136,.55)}
.pl-count{font-family:var(--serif);font-size:clamp(2.4rem,7vw,3.6rem);color:var(--gold-2);margin-top:30px;line-height:1;font-variant-numeric:tabular-nums}
.pl-tag{font-size:.62rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:#9DB0A2;margin-top:14px;margin-left:.42em}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--green-950);color:#9DB0A2;font-size:.7rem;letter-spacing:.05em;text-align:center;padding:8px 16px}
.topbar b{color:var(--gold-2);font-weight:600}

/* ---------- NAV ---------- */
nav.site{position:sticky;top:0;z-index:1000;background:rgba(8,27,18,.86);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--green-line)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:0 26px;height:60px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:26px;flex:1;justify-content:center}
.nav-links a{font-size:.78rem;font-weight:500;letter-spacing:.04em;color:#D6DED6;position:relative;transition:color .25s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--gold-2);transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--gold-2)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-acts{display:flex;gap:10px;align-items:center}
.nav-btn{font-size:.72rem;font-weight:600;padding:8px 16px;border-radius:980px;white-space:nowrap;transition:all .25s}
.nav-btn.ghost{color:var(--gold-2);border:1px solid rgba(227,201,136,.4)}
.nav-btn.ghost:hover{background:rgba(227,201,136,.1)}
.nav-btn.solid{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505}
.nav-btn.solid:hover{transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px}
.burger span{width:22px;height:1.7px;background:var(--gold-2);display:block;transition:.3s}
@media(max-width:1080px){
  .nav-inner{justify-content:space-between}
  .nav-acts{margin-left:auto}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(8,27,18,.98);backdrop-filter:blur(20px);flex-direction:column;padding:22px 26px 30px;gap:20px;border-bottom:1px solid var(--green-line)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.05rem}
  .burger{display:flex;margin-left:2px}
  .nav-acts .nav-btn.ghost{display:none}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:600;padding:14px 30px;border-radius:980px;transition:all .3s var(--tr);border:0;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .65s var(--tr)}
.btn:hover::after{left:130%}
.btn-gold{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;box-shadow:0 8px 26px rgba(201,161,74,.32)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(201,161,74,.46)}
.btn-ghost{background:transparent;color:var(--gold-2);border:1px solid rgba(227,201,136,.4)}
.btn-ghost:hover{background:rgba(227,201,136,.1)}
.btn-green{background:#0F5132;color:var(--beige)}
.btn-green:hover{background:#0B4029;transform:translateY(-2px)}

/* ---------- HERO (video-ready) ---------- */
.hero{background:var(--green-950);color:#fff;position:relative;overflow:hidden;min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:72px 0 48px}
.hero.tall{min-height:80vh}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.75)}
.hero-media img{animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,27,18,.96) 0%,rgba(8,27,18,.84) 44%,rgba(10,32,22,.55) 100%)}
.hero .wrap,.hero .wrap-wide{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:auto -25% -60% -25%;height:120%;z-index:1;background:radial-gradient(ellipse at 50% 100%,rgba(201,161,74,.2),transparent 66%);pointer-events:none}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-2);margin-bottom:24px;display:flex;align-items:center;gap:16px}
.kicker::before{content:"";width:40px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(2.8rem,6.4vw,5rem);font-weight:600;letter-spacing:.005em;line-height:1.03;background:linear-gradient(180deg,#FBF8F0 32%,var(--gold-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;max-width:900px}
.hero p.sub{font-size:1.08rem;color:#B9C4B9;max-width:520px;margin-top:22px}
.hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* ---------- SECTIONS ---------- */
section{padding:76px 0}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin-bottom:16px}
.eyebrow::before{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:0 auto 16px}
h2.title{font-family:var(--serif);font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:600;letter-spacing:.005em;text-align:center;line-height:1.05;color:var(--ink)}
p.lede{font-size:clamp(1rem,1.9vw,1.18rem);color:var(--ink-2);text-align:center;max-width:660px;margin:18px auto 0}
.on-dark{background:var(--green-900);color:#fff}
.on-dark h2.title{color:var(--beige)}
.on-dark p.lede{color:#A9B7AB}
.on-dark .eyebrow{color:var(--gold-2)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--tr),transform .9s var(--tr)}
.reveal.in{opacity:1;transform:none}
.section-cta{text-align:center;margin-top:46px}
.link-arrow{font-size:.95rem;font-weight:600;color:var(--gold-dim);display:inline-flex;align-items:center;gap:7px}
.link-arrow:hover{text-decoration:underline}

/* rounded card bands */
.band{width:calc(100% - 28px);max-width:1720px;margin:14px auto;border-radius:32px;overflow:hidden}
@media(max-width:640px){.band{width:calc(100% - 16px);border-radius:22px}}

/* ---------- LIVE RATE BOARD ---------- */
.board{background:linear-gradient(172deg,#0E2A1E,#0A2016);border:1px solid rgba(227,201,136,.28);border-radius:22px;overflow:hidden;box-shadow:0 34px 90px rgba(4,14,9,.5)}
.board-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--green-line)}
.board-head .t{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.24em;color:var(--beige)}
.dot{width:7px;height:7px;border-radius:50%;background:#6FCF97;box-shadow:0 0 8px #6FCF97;animation:pulse 2s infinite}
.dot.amber{background:var(--gold);box-shadow:0 0 8px var(--gold)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.citysw{display:flex;background:rgba(0,0,0,.25);border:1px solid var(--green-line);border-radius:980px;padding:3px}
.citysw button{font-size:.62rem;font-weight:700;letter-spacing:.1em;color:#8FA093;background:transparent;border:0;padding:5px 13px;border-radius:980px;transition:.25s;text-transform:uppercase}
.citysw button.on{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505}
.board-sub{display:flex;justify-content:space-between;padding:10px 24px;font-size:.58rem;letter-spacing:.18em;color:#6E7F71;border-bottom:1px solid var(--green-line)}
.rate-row{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;border-bottom:1px solid rgba(227,201,136,.07)}
.rate-row:last-child{border-bottom:0}
.rate-row .nm{font-size:.84rem;font-weight:700;letter-spacing:.1em;color:var(--beige)}
.rate-row .ds{font-size:.58rem;letter-spacing:.16em;color:#6E7F71;margin-top:2px}
.rate-row .pr{font-family:var(--serif);font-size:1.72rem;color:var(--gold-2);font-weight:500;text-align:right;line-height:1}
.rate-row .pg{font-size:.56rem;letter-spacing:.14em;color:#6E7F71;text-align:right;margin-top:3px}
.board-foot{padding:11px 24px;font-size:.58rem;letter-spacing:.1em;color:#9A8A55;border-top:1px solid var(--green-line);line-height:1.7}
.rates-note{font-size:.62rem;letter-spacing:.1em;color:#7E8C80;text-align:center;margin-top:16px;text-transform:uppercase}

/* ---------- PRODUCT / COLLECTION CARDS ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)} .g2{grid-template-columns:1fr}}
@media(max-width:520px){.g3,.g4{grid-template-columns:1fr}}
.prod{background:#FDFBF6;border-radius:22px;overflow:hidden;border:1px solid var(--beige-3);transition:transform .3s var(--tr),box-shadow .45s var(--tr);display:flex;flex-direction:column;transform-style:preserve-3d}
.prod:hover{box-shadow:0 26px 60px rgba(30,37,32,.14)}
.prod .ph{position:relative;background:linear-gradient(172deg,#F6F1E4,#EBE2CC);aspect-ratio:1;overflow:hidden}
.prod .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--tr)}
.prod:hover .ph img{transform:scale(1.06)}
.prod .flag{position:absolute;top:14px;left:14px;font-size:.54rem;font-weight:700;letter-spacing:.2em;color:var(--beige);background:var(--green-800);padding:5px 11px;border-radius:980px;text-transform:uppercase;z-index:2}
.prod .info{padding:22px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:.98rem;font-weight:600;font-family:var(--sans)}
.prod .meta{font-size:.62rem;letter-spacing:.18em;color:var(--ink-2);text-transform:uppercase;margin-top:4px}
.prod .price{font-size:1.12rem;font-weight:700;margin-top:12px;font-variant-numeric:tabular-nums}
.prod .price.live{color:var(--gold-dim);font-size:.9rem;letter-spacing:.05em}
.prod a.go{font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--gold-dim);margin-top:14px;display:inline-flex;gap:6px;transition:gap .3s}
.prod a.go:hover{gap:11px}
.col-card{position:relative;border-radius:24px;overflow:hidden;background:var(--green-900);min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:34px 30px;color:#fff;transition:transform .3s var(--tr);transform-style:preserve-3d}
.col-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1.2s var(--tr)}
.col-card:hover img{transform:scale(1.05)}
.col-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(8,27,18,.9) 100%)}
.col-card .inner{position:relative;z-index:2}
.col-card .k{font-size:.6rem;letter-spacing:.32em;color:var(--gold-2);text-transform:uppercase}
.col-card h3{font-size:1.5rem;font-weight:700;margin-top:6px;color:#fff;font-family:var(--serif)}
.col-card .go{display:inline-flex;gap:7px;font-size:.74rem;font-weight:700;color:var(--gold-2);margin-top:14px;letter-spacing:.16em}

/* ---------- SPLIT (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:44px}}
.split-media{border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(8,27,18,.22);position:relative}
.split-media img,.split-media video{width:100%;height:100%;object-fit:cover;display:block}
.split.person .split-media{background:linear-gradient(160deg,#0F5132,#0B4029);box-shadow:0 40px 90px rgba(9,53,35,.28)}
.split.person .split-media img{mix-blend-mode:normal;object-fit:contain;padding:0}
.split h2{font-family:var(--serif);font-size:clamp(2rem,4.2vw,3rem);font-weight:600;line-height:1.08;color:var(--ink)}
.on-dark .split h2{color:var(--beige)}
.split .eyebrow{text-align:left}.split .eyebrow::before{margin:0 0 16px}
.split p{color:var(--ink-2);font-size:1.02rem;margin-top:18px}
.on-dark .split p{color:#A9B7AB}
.feat-list{list-style:none;margin-top:24px}
.feat-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--beige-3);font-size:.95rem;align-items:flex-start}
.on-dark .feat-list li{border-color:var(--green-line);color:#D6DCD2}
.feat-list .tick{width:21px;height:21px;border-radius:6px;flex-shrink:0;margin-top:1px;background:linear-gradient(135deg,#E0BD6D,#B08A37);display:flex;align-items:center;justify-content:center}
.feat-list .tick svg{width:11px;height:11px;stroke:#1B1505;stroke-width:3;fill:none}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:rgba(255,255,255,.045);border:1px solid var(--green-line);border-radius:20px;padding:32px 26px}
.on-light .step{background:var(--beige-2);border-color:var(--beige-3)}
.step .n{font-family:var(--serif);font-size:2.4rem;color:var(--gold-2);line-height:1}
.step h3{font-size:1.02rem;font-weight:600;margin:14px 0 8px;font-family:var(--sans);color:var(--beige)}
.on-light .step h3{color:var(--ink)}
.step p{font-size:.85rem;color:#A9B7AB}
.on-light .step p{color:var(--ink-2)}

/* ---------- STAT STRIP ---------- */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--green-line);border-bottom:1px solid var(--green-line)}
@media(max-width:760px){.statstrip{grid-template-columns:repeat(2,1fr)}}
.statstrip .cell{padding:30px 18px;text-align:center;border-left:1px solid var(--green-line)}
.statstrip .cell:first-child{border-left:0}
.statstrip .n{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--gold-2);line-height:1}
.statstrip .l{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#9DB0A2;margin-top:8px}

/* ---------- CALCULATOR ---------- */
.calc-card{max-width:760px;margin:52px auto 0;background:rgba(255,255,255,.045);border:1px solid rgba(227,201,136,.28);border-radius:26px;padding:42px 40px;backdrop-filter:blur(8px)}
@media(max-width:560px){.calc-card{padding:30px 22px}}
.calc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:680px){.calc-row{grid-template-columns:1fr}}
.field label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.22em;color:#9A8A55;margin-bottom:8px;text-transform:uppercase}
.field input,.field select{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(227,201,136,.2);border-radius:13px;color:var(--beige);font-size:.98rem;padding:13px 16px;outline:none;font-family:inherit;transition:border .25s;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C9A14A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field select option{color:#1E2520}
.field input:focus,.field select:focus{border-color:var(--gold)}
.calc-out{text-align:center;margin-top:28px;padding-top:28px;border-top:1px solid rgba(227,201,136,.16)}
.calc-out .lbl{font-size:.6rem;letter-spacing:.26em;color:#9A8A55;text-transform:uppercase}
.calc-out .val{font-family:var(--serif);font-size:clamp(2.2rem,5.6vw,3.2rem);color:var(--gold-2);margin-top:8px;line-height:1;min-height:1.1em}
.calc-out .note{font-size:.64rem;color:#6E7F71;margin-top:14px;letter-spacing:.08em}

/* ---------- WHATSAPP WIDGET ---------- */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:1800;width:58px;height:58px;border-radius:50%;border:0;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 38px rgba(18,80,45,.45);transition:transform .3s var(--tr)}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:30px;height:30px;fill:#fff}
.wa-menu{position:fixed;right:22px;bottom:92px;z-index:1800;width:300px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(8,27,18,.35);transform:translateY(14px) scale(.97);opacity:0;pointer-events:none;transition:transform .35s var(--tr),opacity .35s var(--tr)}
.wa-menu.open{transform:none;opacity:1;pointer-events:auto}
.wa-head{background:var(--green-900);color:var(--beige);padding:18px 20px}
.wa-head b{font-size:.92rem;display:block}
.wa-head span{font-size:.7rem;color:#9DB0A2}
.wa-menu a{display:flex;align-items:center;gap:13px;padding:15px 20px;border-bottom:1px solid var(--beige-2);font-size:.86rem;font-weight:600;color:var(--ink);transition:background .25s}
.wa-menu a:last-child{border-bottom:0}
.wa-menu a:hover{background:var(--beige)}
.wa-menu a .ico{width:34px;height:34px;border-radius:10px;background:var(--beige-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.wa-menu a small{display:block;font-size:.68rem;color:var(--ink-2);font-weight:400;margin-top:1px}
@media(max-width:640px){.wa-menu{right:14px;left:14px;width:auto}.wa-fab{right:14px;bottom:14px}}

/* ---------- AI CHATBOT (Riya) ---------- */
.riya-fab{position:fixed;right:22px;bottom:90px;z-index:1750;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;border:0;border-radius:980px;padding:11px 18px 11px 12px;
  font-size:.82rem;font-weight:700;box-shadow:0 14px 38px rgba(201,161,74,.45);transition:transform .3s var(--tr)}
.riya-fab:hover{transform:translateY(-2px)}
.riya-fab .av{width:34px;height:34px;border-radius:50%;background:var(--green-900);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;font-weight:700}
.riya-fab .pulse{position:absolute;top:8px;left:10px;width:9px;height:9px;border-radius:50%;background:#6FCF97;box-shadow:0 0 0 0 rgba(111,207,151,.6);animation:riyaPulse 2s infinite}
@keyframes riyaPulse{0%{box-shadow:0 0 0 0 rgba(111,207,151,.6)}70%{box-shadow:0 0 0 8px rgba(111,207,151,0)}100%{box-shadow:0 0 0 0 rgba(111,207,151,0)}}
@media(max-width:640px){.riya-fab{right:14px;bottom:82px}.riya-fab span.lbl{display:none}}
.riya-win{position:fixed;right:22px;bottom:22px;z-index:1900;width:min(380px,94vw);height:min(600px,80vh);background:var(--beige);
  border-radius:22px;overflow:hidden;display:none;flex-direction:column;box-shadow:0 40px 100px rgba(8,27,18,.4);border:1px solid var(--beige-3)}
.riya-win.open{display:flex;animation:riyaIn .35s var(--tr)}
@keyframes riyaIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:640px){.riya-win{right:8px;left:8px;width:auto;bottom:8px;height:86vh}}
.riya-head{background:linear-gradient(135deg,var(--green-900),var(--green-800));color:var(--beige);padding:16px 18px;display:flex;align-items:center;gap:12px}
.riya-head .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.3rem;font-weight:700}
.riya-head b{font-size:.98rem;display:block}
.riya-head span{font-size:.68rem;color:#9DB0A2;display:flex;align-items:center;gap:6px}
.riya-head .on{width:7px;height:7px;border-radius:50%;background:#6FCF97;box-shadow:0 0 6px #6FCF97}
.riya-head button{margin-left:auto;background:none;border:0;color:var(--beige);font-size:1.2rem;opacity:.8}
.riya-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#FBF8F0,var(--beige))}
.riya-msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:.86rem;line-height:1.5;white-space:pre-wrap}
.riya-msg.bot{background:#fff;border:1px solid var(--beige-3);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px}
.riya-msg.me{background:var(--green-800);color:var(--beige);align-self:flex-end;border-bottom-right-radius:5px}
.riya-msg.bot a{color:var(--gold-dim);font-weight:600}
.riya-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--beige-3);border-radius:16px}
.riya-typing span{width:6px;height:6px;border-radius:50%;background:var(--gold-dim);animation:riyaDot 1.2s infinite}
.riya-typing span:nth-child(2){animation-delay:.2s}.riya-typing span:nth-child(3){animation-delay:.4s}
@keyframes riyaDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.riya-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
.riya-chips button{background:#fff;border:1px solid var(--gold);color:var(--gold-dim);font-size:.76rem;font-weight:600;
  padding:8px 14px;border-radius:980px;transition:all .2s;font-family:inherit}
.riya-chips button:hover{background:var(--gold);color:#1B1505}
.riya-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--beige-3);background:var(--beige)}
.riya-input input{flex:1;border:1px solid var(--beige-3);border-radius:980px;padding:11px 16px;font-size:.86rem;outline:none;font-family:inherit;background:#fff}
.riya-input input:focus{border-color:var(--gold)}
.riya-input button{background:var(--green-800);color:var(--beige);border:0;border-radius:50%;width:40px;height:40px;flex-shrink:0;font-size:1rem}
.riya-note{font-size:.6rem;color:var(--ink-2);text-align:center;padding:0 14px 10px}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:22px}
.lb.show{display:flex}
.lb-veil{position:absolute;inset:0;background:rgba(8,27,18,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s var(--tr)}
.lb.in .lb-veil{opacity:1}
.lb-box{position:relative;z-index:2;max-width:min(480px,92vw);transform:translateY(26px) scale(.97);opacity:0;transition:transform .55s var(--tr),opacity .55s var(--tr)}
.lb.in .lb-box{transform:none;opacity:1}
.lb-box img{width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:18px;box-shadow:0 50px 120px rgba(0,0,0,.55)}
.lb-x{position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;border:0;background:var(--beige);color:var(--green-900);font-size:1.05rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s}
.lb-x:hover{transform:rotate(90deg)}
.lb-ctas{display:flex;gap:10px;margin-top:14px}
.lb-ctas a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:14px 10px;border-radius:10px;transition:transform .25s}
.lb-ctas a:hover{transform:translateY(-2px)}
.lb-ctas .wa{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505}
.lb-ctas .em{background:var(--beige);color:var(--green-900)}

/* ---------- FOOTER ---------- */
footer.site{background:var(--green-950);color:#7E8C80;padding:76px 0 40px;font-size:.82rem}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:40px}
@media(max-width:980px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.f-grid{grid-template-columns:1fr 1fr}}
.f-grid img{height:40px;width:auto;margin-bottom:18px}
.f-about{font-size:.8rem;color:#6E7F71;max-width:260px}
.f-grid h4{color:var(--beige);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:18px}
.f-grid a{display:block;margin-bottom:11px;color:#7E8C80;transition:color .25s}
.f-grid a:hover{color:var(--gold-2)}
.f-certs{border-top:1px solid var(--green-line);margin-top:56px;padding-top:30px;display:flex;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap}
.f-certs span{font-size:.6rem;font-weight:700;letter-spacing:.24em;color:#6E7F71;border:1px solid var(--green-line);padding:8px 16px;border-radius:980px;text-transform:uppercase}
.f-bottom{margin-top:34px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.7rem;color:#52645A}
.f-bottom a{color:#7E8C80;margin-left:18px}
.f-bottom a:hover{color:var(--gold-2)}

/* logo chip so the white-bg wordmark sits cleanly on dark bars */
nav.site .nav-logo{background:none;display:inline-flex;line-height:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
nav.site .nav-logo img{height:38px}
footer.site .f-grid img{background:none;height:52px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
/* preloader logo sits transparent on the film — no white chip */
#preloader .pl-logo{background:none;border-radius:0;padding:0}
.riya-fab .av,.riya-head .av{font-family:var(--serif)}

/* ---------- RIYA PHOTO AVATAR ---------- */
.riya-fab .av,.riya-head .av{overflow:hidden;flex:none;border:1.5px solid var(--gold-2)}
.riya-fab .av img,.riya-head .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---------- PRELOADER v2 (gold logo) ---------- */
.pl-logo.xl{height:clamp(120px,22vw,190px);margin-bottom:6px;animation:plGlow 2.4s ease-in-out infinite}
@keyframes plGlow{0%,100%{filter:drop-shadow(0 6px 24px rgba(201,161,74,.25))}50%{filter:drop-shadow(0 10px 44px rgba(227,201,136,.6))}}
.pl-bar{width:min(320px,70vw);height:3px;border-radius:99px;background:rgba(227,201,136,.14);margin:30px auto 18px;overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#B08A37,#E3C988);box-shadow:0 0 14px rgba(227,201,136,.7)}

/* ---------- CARD ALIGNMENT (all pages) ---------- */
.grid{align-items:stretch}
.prod{display:flex;flex-direction:column;height:100%}
.prod .info{display:flex;flex-direction:column;flex:1}
.prod .info .go,.prod .info .acts{margin-top:auto}
.prod .info .price{margin-top:8px}
.steps .step{height:100%}
.col-card{height:100%}

/* ---------- RIYA VIDEO BUBBLE ---------- */
.riya-msg.vid{padding:5px;background:#fff;border:1px solid var(--beige-3);max-width:64%}
.riya-msg.vid video{width:100%;max-width:200px;border-radius:12px;display:block}

/* ---------- RIYA PRESENTER CARD (pages) ---------- */
.riya-present{position:relative;width:min(300px,78vw);border-radius:26px;overflow:hidden;border:1.5px solid rgba(227,201,136,.5);box-shadow:0 40px 90px rgba(11,19,16,.45);background:#0B1310}
.riya-present video{width:100%;display:block}
.riya-present .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(11,19,16,.88));color:var(--beige);font-size:.78rem}
.riya-present .cap b{color:var(--gold-2);display:block;font-size:.9rem}

/* ---------- PRELOADER v3 — tiger muse film ---------- */
#preloader .pl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
#preloader .pl-shade{position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,rgba(11,19,16,.25),rgba(11,19,16,.88))}
#preloader .pl-inner{position:relative;z-index:2}

/* ---------- RIYA FAB — waving video, bigger face ---------- */
.riya-fab{padding:8px 20px 8px 8px;gap:12px}
.riya-fab .av{width:62px;height:62px;border-width:2px}
.riya-fab .av.fabvid video{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:50%;display:block;transform:scale(1.45);transform-origin:50% 22%}
.riya-fab .av.fabvid{overflow:hidden;border-radius:50%}
.riya-fab .lbl{font-size:.9rem}
.riya-fab .pulse{top:6px;left:8px}
.riya-head .av{width:52px;height:52px}
@media(max-width:640px){.riya-fab .av{width:54px;height:54px}}

/* ---------- AMBIENT MUSIC TOGGLE ---------- */
#musicToggle{position:fixed;left:22px;bottom:22px;z-index:1750;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(227,201,136,.55);background:rgba(17,28,23,.85);backdrop-filter:blur(6px);color:#E3C988;font-size:1.15rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:all .3s}
#musicToggle:hover{transform:translateY(-2px)}
#musicToggle.on{background:linear-gradient(135deg,#E0BD6D,#B08A37);color:#1B1505;animation:riyaPulse 2s infinite}
#musicToggle .off-slash{position:absolute;width:26px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
#musicToggle.on .off-slash{display:none}
@media(max-width:640px){#musicToggle{left:12px;bottom:12px;width:42px;height:42px}}

/* ---------- LIVE RATE TICKER (stock-market feel) ---------- */
[data-rate]{position:relative}
.rate-val{transition:color .45s var(--tr)}
.rate-arrow{display:inline-block;font-size:.52em;line-height:1;margin-left:.3em;vertical-align:middle;font-family:var(--sans);font-weight:700;transition:opacity .25s,transform .25s}
.rate-arrow.up{color:#3FBE72}
.rate-arrow.down{color:#E5533C}
.rate-arrow.up{transform:translateY(-1px)}
.rate-arrow.down{transform:translateY(1px)}
@keyframes tkFlashUp{0%{background:rgba(63,190,114,.22)}100%{background:transparent}}
@keyframes tkFlashDown{0%{background:rgba(229,83,60,.20)}100%{background:transparent}}
[data-rate].tick-up{animation:tkFlashUp .85s var(--tr)}
[data-rate].tick-down{animation:tkFlashDown .85s var(--tr)}
.rate-row .pr .rate-arrow{font-size:.44em}

/* ---------- RIYA FAB — clean round video, no gold pill ---------- */
.riya-fab{background:none!important;box-shadow:none!important;padding:0;border-radius:50%;gap:10px}
.riya-fab:hover{transform:translateY(-2px)}
.riya-fab .av.fabvid{box-shadow:0 14px 34px rgba(8,27,18,.5);border:2px solid var(--gold-2)}
.riya-fab .av.fabvid video{background:#0B1310}
.riya-fab .lbl{background:rgba(17,28,23,.9);backdrop-filter:blur(6px);color:var(--gold-2);border:1px solid rgba(227,201,136,.4);padding:8px 15px;border-radius:980px;box-shadow:0 8px 22px rgba(8,27,18,.4);font-weight:700}
.riya-fab .pulse{top:2px;left:2px;z-index:3}
@media(max-width:640px){.riya-fab .lbl{display:none}}

/* ===== PWA install button on the loading screen ===== */
.pl-install{display:none;align-items:center;gap:12px;margin:22px auto 0;background:linear-gradient(135deg,#E0BD6D,#B08A37);
  border:0;border-radius:16px;padding:11px 18px 11px 12px;cursor:pointer;font-family:inherit;text-align:left;
  box-shadow:0 14px 34px rgba(201,161,74,.4);max-width:320px}
.pl-install:not([hidden]){display:flex}
.pl-install img{width:42px;height:42px;border-radius:10px;flex:none}
.pl-install span{display:flex;flex-direction:column;line-height:1.25}
.pl-install b{color:#1B1505;font-size:.92rem;font-weight:800}
.pl-install small{color:#4a3a10;font-size:.72rem}

/* ============================================================
   APP SHELL — bottom tab bar + native-feeling mobile UI
   Shows on phones/tablets (<=900px) and in installed PWA.
   ============================================================ */
:root{
  --tabh: 64px;                 /* card height */
  --tabgap: 11px;               /* gap between card and screen edges */
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* everything that floats above the tab card measures from here, so the
     FAB rail can never collide with the bar or with itself */
  --fabbase: calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b) + 10px);
}

#abrafTabs{display:none}

@media (max-width:900px){
  /* ---- app chrome feel ---- */
  html{ -webkit-text-size-adjust:100%; }
  body{
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior-y:contain;                 /* no rubber-band flash */
    padding-bottom:calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b)) !important;
  }
  nav.site,.topbar,footer.site,#abrafTabs{ -webkit-user-select:none; user-select:none; }

  /* ---- the bottom tab bar: floating beige card, gold hairline ---- */
  #abrafTabs{
    /* above the Buy-Bullion vault gate (2800) — you must always be able to
       navigate away from a page, even while a full-screen gate is up */
    display:flex; position:fixed; z-index:2900;
    left:var(--tabgap); right:var(--tabgap);
    bottom:calc(var(--safe-b) + var(--tabgap));
    height:var(--tabh); border-radius:24px;
    background:linear-gradient(180deg,#FCFAF3 0%,#F2EBDB 100%);
    border:1px solid rgba(201,161,74,.34);
    box-shadow:0 18px 40px rgba(6,22,14,.36), 0 4px 12px rgba(6,22,14,.18),
               inset 0 1px 0 rgba(255,255,255,.92);
    perspective:760px;
    /* no fill-mode: if the entrance animation is deferred (background tab),
       the bar still sits at its resting position instead of staying off-screen */
    animation:abTabsIn .58s cubic-bezier(.2,.95,.25,1);
  }
  @keyframes abTabsIn{
    from{ transform:translateY(150%) }
    to  { transform:none }
  }

  /* light sweeping across the beige */
  .tab-clip{ position:absolute; inset:0; overflow:hidden; border-radius:inherit;
    pointer-events:none; z-index:0 }
  .tab-sheen{
    position:absolute; top:0; bottom:0; left:0; width:34%;
    background:linear-gradient(90deg,transparent,rgba(201,161,74,.17),transparent);
    transform:translateX(-130%) skewX(-18deg);
    animation:abSheen 9s cubic-bezier(.55,0,.45,1) infinite;
  }
  @keyframes abSheen{
    0%,70%{ transform:translateX(-130%) skewX(-18deg) }
    100%  { transform:translateX(360%)  skewX(-18deg) }
  }

  /* soft gold halo that glides to the active tab (no hard puck — the icon is the hero) */
  .tab-puck{
    position:absolute; left:0; top:-30px; width:64px; height:64px; border-radius:50%;
    background:radial-gradient(circle,
      rgba(201,161,74,.30) 0%, rgba(201,161,74,.13) 44%, rgba(201,161,74,0) 72%);
    transition:transform .48s cubic-bezier(.34,1.5,.42,1);
    pointer-events:none; z-index:1;
  }

  /* ---- tabs ---- */
  #abrafTabs a{
    position:relative; z-index:2; flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    gap:5px; padding-bottom:9px;
    text-decoration:none; color:#9C9784; font-size:.55rem; font-weight:700;
    letter-spacing:.015em; transition:color .28s; transform-style:preserve-3d;
  }
  #abrafTabs a .ic{
    display:block; width:26px; height:26px; line-height:0; transform-style:preserve-3d;
    filter:grayscale(1) opacity(.52);            /* inactive icons read as soft grey */
    transition:transform .48s cubic-bezier(.34,1.5,.42,1), filter .3s;
  }
  #abrafTabs a .i3{ display:block; transform-style:preserve-3d }
  #abrafTabs a svg{ display:block; width:26px; height:26px }
  /* label — `.lb` is also the lightbox class (display:none), so force display
     here and accept both names for browsers holding an older cached app.js */
  #abrafTabs a .tlb,
  #abrafTabs a .lb{ display:block; position:static; inset:auto; padding:0;
    white-space:nowrap; transition:color .28s, transform .3s, font-size .28s }
  #abrafTabs a:active .ic{ transform:scale(.84) }

  /* active tab: icon grows to full colour and lifts clear of the card */
  #abrafTabs a.on{ color:#0F5132 }
  #abrafTabs a.on .ic{
    transform:translateY(-25px) scale(1.62);
    filter:drop-shadow(0 7px 13px rgba(132,98,26,.42));
  }
  #abrafTabs a.on .tlb,
  #abrafTabs a.on .lb{ color:#0F5132; font-size:.62rem }
  #abrafTabs a.on:active .ic{ transform:translateY(-25px) scale(1.46) }

  /* coin-flip on tap */
  .tab-flip{ animation:abFlip .62s cubic-bezier(.3,.9,.25,1) }
  @keyframes abFlip{ from{ transform:rotateY(0) } to{ transform:rotateY(360deg) } }

  /* gold-dust burst on tap — fires from where the raised icon lands */
  .tab-spark{ position:absolute; top:-2px; left:50%; width:0; height:0; pointer-events:none; z-index:3 }
  .tab-spark i{
    position:absolute; left:0; top:0; width:4px; height:4px; margin:-2px; border-radius:50%;
    background:radial-gradient(circle,#FFF8E2,#E2BF74 58%,rgba(226,191,116,0));
    animation:abSpark .62s cubic-bezier(.2,.75,.3,1) forwards;
  }
  @keyframes abSpark{
    0%  { opacity:1; transform:rotate(var(--a)) translateY(0) scale(.55) }
    100%{ opacity:0; transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1.15) }
  }

  @media (prefers-reduced-motion: reduce){
    #abrafTabs,.tab-sheen,.tab-flip{ animation:none !important }
    .tab-puck,#abrafTabs a .ic{ transition-duration:.001s }
  }

  /* ---- FAB rail: one vertical stack on the right, nothing overlapping ----
     bottom-up order is  [tab card] → WhatsApp → Ask Riya.
     The cart pill lives on the left so it never meets the rail.        */
  .wa-fab{   right:14px !important; bottom:var(--fabbase) !important }
  .riya-fab{ right:14px !important; bottom:calc(var(--fabbase) + 70px) !important }
  .riya-fab .lbl{ display:none }                     /* avatar only — keeps the rail narrow */
  .cart-fab{ bottom:var(--fabbase) !important }
  .wa-menu{  bottom:calc(var(--fabbase) + 66px) !important }
  #abrafInstallChip{ bottom:calc(var(--fabbase) - 2px) !important }
  #abrafPush{ bottom:calc(var(--fabbase) - 2px) !important }
  .pay-overlay{ padding-bottom:calc(var(--fabbase) + 4px) }

  /* Riya's chat sheet fills the screen above the tab card (and outranks it,
     so the bar can never draw over the conversation) */
  .riya-win{
    left:8px !important; right:8px !important; top:8px !important;
    bottom:calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b) + 6px) !important;
    width:auto !important; height:auto !important; z-index:2950 !important;
  }

  /* ---- app-like header: the marketing topbar is dead weight on a phone
     (contact details live in the footer and behind the WhatsApp button) ---- */
  .topbar{ display:none }
  nav.site{ position:sticky; top:0 }
  .nav-inner{ padding-top:8px; padding-bottom:8px }
  .nav-logo img{ height:34px }
  /* the two header buttons are redundant once the tab bar exists */
  .nav-acts .nav-btn{ display:none }
  .burger{ display:flex }
}

/* installed PWA: hide the marketing topbar entirely, feels more native */
@media (display-mode: standalone){
  .topbar{ display:none }
  body{ padding-bottom:calc(var(--tabh) + var(--tabgap)*2 + var(--safe-b)) }
}