/* ==========================================================================
   LGoldGallery – shared styles (home, about, contact)
   ========================================================================== */
:root{
  --bg:#070707; --bg2:#141414; --gold:#d4af37; --gold-light:#f3d98b; --gold-deep:#a8841f;
  --text:#ece7d8; --muted:#9a9484; --line:rgba(212,175,55,.38);
  --up:#5fe3a1; --down:#ff7b7b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Vazirmatn',system-ui,sans-serif; color:var(--text); min-height:100vh; overflow-x:hidden; position:relative;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 60% 50% at 18% 30%, rgba(212,175,55,.09), transparent 70%),
    radial-gradient(ellipse at 80% 100%, #1a170f 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* ---------- sparkles ---------- */
.deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sp{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff6d0 0%,rgba(243,217,139,.0) 70%);
  animation:twinkle 4s ease-in-out infinite;opacity:0}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

/* ---------- header / nav ---------- */
header{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:26px 6vw}
.logo{font-family:'Cormorant Garamond',serif;font-size:27px;letter-spacing:.06em;color:var(--gold-light);direction:ltr;text-decoration:none}
nav{display:flex;gap:34px;font-size:14px;align-items:center}
nav a{text-decoration:none;opacity:.85;transition:.2s;position:relative}
nav a:hover{color:var(--gold);opacity:1}
nav a[aria-current="page"]{color:var(--gold);opacity:1}
nav > a[aria-current="page"]::after{content:"";position:absolute;right:0;left:0;bottom:-8px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.dd{position:relative;padding:12px 0}
.dd-menu{display:none;position:absolute;top:100%;right:0;min-width:210px;background:#141414;z-index:20;
  border:1px solid var(--line);border-radius:8px;padding:8px 0;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block;padding:9px 18px;white-space:nowrap}
.dd-menu a:hover{background:rgba(212,175,55,.1)}
.dd-menu .none{display:block;padding:9px 18px;color:var(--muted);font-size:13px}

.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:transparent;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--gold-light);transition:.25s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero layout + gold lines + logo ---------- */
main{position:relative;z-index:3;padding:0 6vw;flex:1 0 auto;width:100%}
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:10px;
  padding:clamp(10px,3vh,40px) 0 clamp(24px,4vh,48px);min-height:min(74vh,640px)}
.hero-text{max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:13px;letter-spacing:.12em;margin-bottom:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.hero p{margin-top:16px;color:var(--muted);font-size:16px;max-width:520px;line-height:2.1}

.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:360px}
.hero-art svg{width:min(100%,660px);height:auto;aspect-ratio:1;margin:0 auto;overflow:visible;
  animation:floaty 14s ease-in-out infinite}
.hero-art .dl{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.6s cubic-bezier(.3,.6,.2,1) forwards}
.hero-art .dl:nth-of-type(2){animation-delay:.35s} .hero-art .dl:nth-of-type(3){animation-delay:.7s}
.hero-art .orn{opacity:0;animation:logoIn 1.2s 2.6s ease forwards}
.hero-art .halo{animation:halo 5.5s ease-in-out infinite}
.hero-art .logo-g{opacity:0;animation:logoIn 1.8s .9s cubic-bezier(.2,.7,.2,1) forwards;
  filter:drop-shadow(0 0 20px rgba(212,175,55,.3))}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes floaty{50%{transform:translateY(12px)}}
@keyframes halo{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes logoIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* ---------- buttons ---------- */
.btns{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.btn{padding:11px 30px;border-radius:30px;font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--gold);
  background:var(--gold);color:#111;text-decoration:none;transition:.25s;display:inline-block}
.btn.ghost{background:transparent;color:var(--gold)}
.btn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,175,55,.22)}

/* ---------- footer ---------- */
footer{position:relative;z-index:3;text-align:center;padding:26px;color:var(--muted);font-size:12px;margin-top:auto;
  border-top:1px solid rgba(212,175,55,.15)}
footer a{color:var(--gold);text-decoration:none} footer a:hover{text-decoration:underline}

/* ==========================================================================
   Inner pages (about / contact)
   ========================================================================== */
.page-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:min(70vh,620px)}
.page-hero .hero-text{max-width:680px}
.page-hero .hero-art svg{width:min(100%,520px)}
.page-title{font-weight:800;font-size:clamp(38px,5.6vw,68px);line-height:1.25;
  background:linear-gradient(100deg,var(--gold-deep) 10%,var(--gold-light) 35%,#fff3c4 50%,var(--gold-light) 65%,var(--gold-deep) 90%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0% 0}}

/* about: three statements separated by gold hairlines */
.facts{margin-top:30px;max-width:560px;list-style:none}
.facts li{padding:18px 0;border-top:1px solid rgba(212,175,55,.25)}
.facts li:last-child{border-bottom:1px solid rgba(212,175,55,.25)}
.facts h3{font-size:16px;font-weight:600;color:var(--gold-light)}
.facts p{margin-top:6px;font-size:14px;line-height:2;color:var(--muted)}

/* contact: panel with one row per channel */
.panel{position:relative;margin-top:28px;border:1px solid var(--line);border-radius:20px;padding:6px clamp(16px,2.6vw,28px);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 70px rgba(212,175,55,.06) inset,0 30px 80px rgba(0,0,0,.5)}
.panel::before{content:"";position:absolute;top:0;left:7%;right:7%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.clist{list-style:none}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:20px 0;
  border-bottom:1px solid rgba(212,175,55,.18)}
.crow:last-child{border-bottom:0}
.cicon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--gold);flex:none;
  border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,#1e1a0f,#0b0b0b)}
.cicon svg{width:24px;height:24px}
.cbody{min-width:0}
.clabel{font-size:12.5px;color:var(--muted)}
.cvalue{display:block;margin-top:3px;font-size:clamp(19px,2.3vw,24px);font-weight:600;color:var(--gold-light);
  letter-spacing:.02em;text-decoration:none;font-variant-numeric:tabular-nums}
a.cvalue:hover{color:#fff3c4}
.cvalue.ltr{direction:ltr;text-align:right}
.cvalue.addr{font-size:clamp(16px,1.9vw,19px);line-height:1.9;font-weight:400;color:var(--text)}
.cact{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 14px;border-radius:30px;
  border:1px solid var(--line);color:var(--text);font-size:13px;text-decoration:none;transition:.25s;white-space:nowrap}
.pill svg{width:19px;height:19px;flex:none}
.pill:hover{transform:translateY(-2px);background:rgba(212,175,55,.08);border-color:var(--gold)}
.pill.call svg{color:var(--gold)}
.pill.wa svg{color:#25d366} .pill.wa:hover{border-color:#25d366}
.pill.tg svg{color:#34aadf} .pill.tg:hover{border-color:#34aadf}
.pill.gm:hover{border-color:#ea4335} .pill.wz:hover{border-color:#33ccff} .pill.ns:hover{border-color:#1e88e5}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-art{min-height:0;margin-top:6px}
  .hero-art svg{width:min(100%,460px)}
  .page-hero .hero-art svg{width:min(100%,380px)}
}
@media(max-width:760px){
  header{padding:20px 6vw}
  .menu-btn{display:flex}
  nav{display:none;position:absolute;top:calc(100% - 4px);right:6vw;left:6vw;flex-direction:column;align-items:stretch;gap:0;
    background:#141414;border:1px solid var(--line);border-radius:14px;padding:8px 0;box-shadow:0 18px 40px rgba(0,0,0,.65)}
  nav.open{display:flex}
  nav a{padding:12px 20px}
  nav > a[aria-current="page"]::after{display:none}
  nav > a[aria-current="page"]{background:rgba(212,175,55,.08)}
  .dd{padding:0}
  .dd-menu{display:block;position:static;min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0 22px 6px 0}
  .dd-menu a{padding:8px 18px;font-size:13px;opacity:.75}
  .crow{grid-template-columns:auto minmax(0,1fr)}
  .cact{grid-column:1/-1;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero-art .dl{stroke-dashoffset:0}.hero-art .logo-g,.hero-art .orn{opacity:1}
}