/*
Theme Name: QCEOM
Theme URI: https://qceom.ae
Author: QCEOM
Description: Custom single-page theme for Quorum Club Events Organizing & Managing L.L.C
Version: 1.2
Requires at least: 5.0
Requires PHP: 7.0
Text Domain: qceom
*/

:root{
    --bg: #0d0c0a;
    --bg-alt: #161310;
    --panel: #1b1712;
    --ink: #f2ece0;
    --muted: #a89d8b;
    --muted-dim: #7c7264;
    --gold: #c8a15c;
    --gold-soft: #e3c98e;
    --gold-dim: #8a6f3e;
    --line: rgba(242,236,224,0.10);
    --line-strong: rgba(200,161,92,0.35);
    --serif: "Fraunces", "Times New Roman", serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 40px;}
  .eyebrow{
    font-family:var(--sans);
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
  }

  /* ---------- NAV ---------- */
  header{
  position:static;
  padding:26px 0;
  background:rgba(13,12,10,0.92);
  border-bottom:1px solid var(--line);
}
  nav.wrap{display:flex; align-items:center; justify-content:space-between;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand-mark{
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-style:italic; font-weight:500;
    color:var(--gold-soft); font-size:16px;
    position:relative;
  }
  .brand-mark::before{
    content:"";
    position:absolute; inset:-6px;
    border:1px solid rgba(200,161,92,0.18);
    border-radius:50%;
  }
  .brand-name{
    font-family:var(--serif); font-size:16.5px; letter-spacing:0.02em;
    color:var(--ink);
  }
  .brand-name b{font-weight:600;}
  .brand-sub{font-size:9.5px; letter-spacing:0.18em; color:var(--muted-dim); text-transform:uppercase; display:block; margin-top:2px;}
  .nav-links{display:flex; gap:44px; align-items:center;}
  .nav-links a{
    font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--muted); font-weight:500;
    position:relative; padding-bottom:4px;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
    transition:width .3s ease;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    border:1px solid var(--line-strong);
    padding:9px 20px;
    font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-soft);
    border-radius:100px;
    white-space:nowrap;
    transition:background .3s ease, color .3s ease;
  }
  .nav-cta:hover{background:var(--gold); color:#161310;}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    position:relative;
    padding:160px 0 100px;
    background:
      radial-gradient(ellipse 60% 50% at 78% 15%, rgba(200,161,92,0.10), transparent 60%),
      radial-gradient(ellipse 50% 40% at 10% 85%, rgba(200,161,92,0.06), transparent 60%),
      var(--bg);
    overflow:hidden;
  }
  .rings{
    position:absolute; top:50%; right:-8%; transform:translateY(-50%);
    width:640px; height:640px; pointer-events:none;
    opacity:0.9;
  }
  @media (max-width:980px){ .rings{ right:-30%; width:480px; height:480px; opacity:0.5;} }
  .hero-inner{position:relative; z-index:2;}
  .hero .eyebrow{margin-bottom:26px; display:block;}
  h1.display{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(40px, 6vw, 78px);
    line-height:1.06;
    letter-spacing:-0.01em;
    max-width:820px;
    color:var(--ink);
  }
  h1.display em{
    font-style:italic; font-weight:400; color:var(--gold-soft);
  }
  h1.display.display--lede{
    font-weight:300;
    font-size:clamp(26px, 3.2vw, 42px);
    line-height:1.4;
    letter-spacing:0;
    max-width:760px;
  }
  .hero-lede{
    margin-top:30px;
    max-width:480px;
    font-size:16px;
    color:var(--muted);
    font-weight:300;
  }
  .hero-meta{
    margin-top:52px;
    display:flex; gap:56px; flex-wrap:wrap;
    border-top:1px solid var(--line);
    padding-top:28px;
    max-width:720px;
  }
  .hero-meta div{display:flex; flex-direction:column; gap:6px;}
  .hero-meta .num{font-family:var(--serif); font-style:italic; font-size:26px; color:var(--gold-soft);}
  .hero-meta .lbl{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-dim);}

  section{padding:130px 0; position:relative;}
  .section-head{margin-bottom:64px; max-width:640px;}
  .section-head .eyebrow{margin-bottom:18px;}
  .section-head h2{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(30px,3.6vw,46px);
    line-height:1.15; color:var(--ink);
  }
  .section-head h2 em{font-style:italic; color:var(--gold-soft);}

  /* ---------- ABOUT ---------- */
  #about{background:var(--bg);}
  .about-grid{
    display:grid; grid-template-columns:1fr 1.35fr; gap:80px; align-items:start;
  }
  @media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:48px;} }
  .founded-block{
    border:1px solid var(--line); border-radius:4px;
    padding:36px 30px;
    background:var(--bg-alt);
  }
  .founded-block .year{
    font-family:var(--serif); font-style:italic; font-size:58px; color:var(--gold-soft); line-height:1;
  }
  .founded-block .year-label{
    margin-top:10px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-dim);
  }
  .about-copy p{
    font-size:19px; line-height:1.7; color:#dcd4c3; font-weight:300;
    font-family:var(--serif);
  }
  .segment-tags{
    margin-top:38px; display:flex; gap:14px; flex-wrap:wrap;
  }
  .segment-tags span{
    border:1px solid var(--line-strong);
    padding:9px 18px; border-radius:100px;
    font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold-soft);
  }

  /* ---------- TEAM ---------- */
  #team{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .team-card{
    display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start;
  }
  @media (max-width:760px){ .team-card{grid-template-columns:1fr;} }
  .avatar{
    width:200px; height:200px; border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-style:italic; font-size:56px;
    color:var(--gold-soft);
    background:radial-gradient(circle at 35% 30%, rgba(200,161,92,0.14), transparent 70%);
    position:relative;
  }
  .avatar::before{
    content:""; position:absolute; inset:-10px; border-radius:50%;
    border:1px solid rgba(200,161,92,0.16);
  }
  .team-name{font-family:var(--serif); font-size:28px; color:var(--ink);}
  .team-title{margin-top:4px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);}
  .team-bio{margin-top:22px; max-width:640px; color:var(--muted); font-size:16px; font-weight:300; line-height:1.75;}
  .credentials{
    margin-top:30px; display:flex; gap:34px; flex-wrap:wrap;
    border-top:1px solid var(--line); padding-top:26px;
  }
  .credentials div{display:flex; flex-direction:column; gap:4px;}
  .credentials .cnum{font-family:var(--serif); font-style:italic; color:var(--gold-soft); font-size:20px;}
  .credentials .clbl{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-dim); max-width:160px;}

  /* ---------- CONTACT ---------- */
  #contact{background:var(--bg);}
  .contact-panel{
    border:1px solid var(--line-strong);
    border-radius:6px;
    padding:70px 60px;
    background:
      radial-gradient(ellipse 60% 80% at 90% 0%, rgba(200,161,92,0.08), transparent 60%),
      var(--panel);
    display:grid; grid-template-columns:1.1fr 1fr; gap:60px;
  }
  @media (max-width:760px){ .contact-panel{grid-template-columns:1fr; padding:44px 26px;} }
  .contact-panel h2{
    font-family:var(--serif); font-weight:400; font-style:italic;
    font-size:clamp(28px,3.4vw,42px); color:var(--gold-soft); line-height:1.2;
  }
  .contact-panel .hero-lede{margin-top:18px; color:var(--muted); max-width:420px;}
  .contact-list{display:flex; flex-direction:column; gap:26px; justify-content:center;}
  .contact-row{
    display:flex; align-items:center; gap:18px;
    padding-bottom:22px; border-bottom:1px solid var(--line);
  }
  .contact-row:last-child{border-bottom:none; padding-bottom:0;}
  .contact-icon{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; color:var(--gold-soft); flex-shrink:0;
  }
  .contact-row a, .contact-row span.static{
    font-size:17px; color:var(--ink); font-weight:400;
    transition:color .25s ease;
  }
  .contact-row a:hover{color:var(--gold-soft);}
  .contact-row .clbl{display:block; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:4px;}
  .cta-arrow{
    margin-top:36px;
    display:inline-flex; align-items:center; gap:12px;
    border:1px solid var(--gold); color:var(--gold-soft);
    padding:14px 26px; border-radius:100px;
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    transition:background .3s ease, color .3s ease, gap .3s ease;
  }
  .cta-arrow:hover{background:var(--gold); color:#161310; gap:18px;}

  footer{
    padding:44px 0; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  footer .fname{font-family:var(--serif); font-size:14px; color:var(--muted);}
  footer .fright{font-size:11.5px; color:var(--muted-dim); letter-spacing:0.04em;}

  /* ---------- MOBILE NAV ---------- */
  .hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:36px; height:36px;
    background:none; border:none; padding:0;
    cursor:pointer;
    z-index:200;
    position:relative;
  }
  .hamburger span{
    display:block; width:100%; height:1px;
    background:var(--ink);
    transition:transform .3s ease, opacity .3s ease, background .3s ease;
  }
  .hamburger.active span{background:var(--gold-soft);}
  .hamburger.active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .hamburger.active span:nth-child(2){opacity:0;}
  .hamburger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}


#scrollTopBtn{
  position:fixed;
  bottom:28px; right:28px;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line-strong);
  color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:250;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .3s ease;
}
#scrollTopBtn.visible{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
#scrollTopBtn:hover{ background:var(--gold-dim); color:var(--ink); }
@media (max-width:640px){
  #scrollTopBtn{ bottom:20px; right:20px; width:40px; height:40px; }
}
  .mobile-menu{
    position:fixed; inset:0;
    background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:34px;
    z-index:150;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  }
  .mobile-menu.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0);
    transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
  }
  .mobile-menu a{
    font-family:var(--serif); font-size:26px; color:var(--ink);
    letter-spacing:0.01em;
  }
  .mobile-menu a:hover{color:var(--gold-soft);}
  .mobile-menu .mobile-cta{
    margin-top:12px;
    border:1px solid var(--gold); color:var(--gold-soft);
    padding:12px 30px; border-radius:100px;
    font-family:var(--sans); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  }

  @media (max-width:780px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .hamburger{display:flex;}
  }

  @media (max-width:640px){
    .wrap{padding:0 22px;}
    section{padding:90px 0;}
    .hero{padding:130px 0 70px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  .ring-rotate{animation:spin 90s linear infinite; transform-origin:320px 320px;}
  .ring-rotate-rev{animation:spin-rev 70s linear infinite; transform-origin:320px 320px;}
  @keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  @keyframes spin-rev{ from{transform:rotate(360deg);} to{transform:rotate(0deg);} }