/*
Theme Name: SG Finance
Theme URI: https://sgfinance4u.com
Author: SG Finance
Author URI: https://sgfinance4u.com
Description: A luxury, dark & gold themed WordPress theme built for SG Finance, a private wealth advisory firm. Features GSAP scroll animations, a Three.js animated hero, Elementor compatibility, a Services custom post type, testimonials, and a working contact form. Fully editable from the WordPress Customizer and Admin — no hardcoded content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sgfinance
Tags: custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, right-sidebar, e-commerce

SG Finance WordPress Theme is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --sg-black: #050505;
  --sg-black-2: #0D1117;
  --sg-black-3: #111827;
  --sg-gold: #D4AF37;
  --sg-gold-accent: #F5C542;
  --sg-white: #FFFFFF;
  --sg-grey: #9CA3AF;
  --sg-grey-line: rgba(255,255,255,0.08);
  --sg-glass: rgba(255,255,255,0.04);
  --sg-glass-border: rgba(212,175,55,0.25);
  --sg-radius: 20px;
  --sg-radius-sm: 12px;
  --sg-shadow: 0 20px 60px rgba(0,0,0,0.45);
  --sg-shadow-gold: 0 10px 40px rgba(212,175,55,0.15);
  --sg-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sg-container: 1240px;
  --sg-transition: 0.4s cubic-bezier(.16,.84,.44,1);
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--sg-black);
  color:var(--sg-white);
  font-family:var(--sg-font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--sg-font-heading); font-weight:600; margin:0 0 .5em; line-height:1.2; }
p{ margin:0 0 1em; color:var(--sg-grey); }
.sg-container{ max-width:var(--sg-container); margin:0 auto; padding:0 24px; }
.sg-section{ position:relative; padding:120px 0; }
.sg-section--tight{ padding:80px 0; }
.sg-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--sg-gold); text-transform:uppercase; letter-spacing:3px;
  font-size:12px; font-weight:600; margin-bottom:18px;
}
.sg-eyebrow::before{ content:''; width:28px; height:1px; background:var(--sg-gold); }
.sg-heading{ font-size:clamp(28px,4vw,44px); }
.sg-heading .accent{ color:var(--sg-gold); font-style:italic; }
.sg-lead{ color:var(--sg-grey); font-size:18px; max-width:640px; }

/* =========================================================
   2. BUTTONS
   ========================================================= */
.sg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px; border-radius:100px; font-weight:600; font-size:14px;
  letter-spacing:.5px; text-transform:uppercase; cursor:pointer; border:1px solid transparent;
  transition:var(--sg-transition); position:relative; overflow:hidden;
}
.sg-btn--gold{
  background:linear-gradient(135deg,var(--sg-gold),var(--sg-gold-accent));
  color:#0D1117; box-shadow:var(--sg-shadow-gold);
}
.sg-btn--gold:hover{ transform:translateY(-3px); box-shadow:0 16px 50px rgba(212,175,55,0.35); }
.sg-btn--ghost{ background:transparent; border-color:rgba(255,255,255,0.25); color:var(--sg-white); }
.sg-btn--ghost:hover{ border-color:var(--sg-gold); color:var(--sg-gold); transform:translateY(-3px); }

/* =========================================================
   3. GLASS CARDS
   ========================================================= */
.sg-card{
  background:var(--sg-glass);
  border:1px solid var(--sg-grey-line);
  border-radius:var(--sg-radius);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:36px;
  transition:var(--sg-transition);
}
.sg-card:hover{ border-color:var(--sg-glass-border); transform:translateY(-6px); box-shadow:var(--sg-shadow); }

/* =========================================================
   4. HEADER
   ========================================================= */
.sg-header{
  position:fixed; top:0; left:0; width:100%; z-index:999;
  padding:22px 0; transition:var(--sg-transition);
  background:linear-gradient(180deg,rgba(5,5,5,0.85),transparent);
}
.sg-header.is-scrolled{ background:rgba(5,5,5,0.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--sg-grey-line); padding:14px 0; }
.sg-header__inner{ display:flex; align-items:center; justify-content:space-between; }
.sg-logo{ display:flex; align-items:center; gap:12px; font-family:var(--sg-font-heading); font-size:22px; letter-spacing:1px; }
.sg-logo img{ max-height:44px; width:auto; }
.sg-nav ul{ display:flex; gap:36px; }
.sg-nav a{ font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--sg-grey); transition:.3s; position:relative; }
.sg-nav a:hover, .sg-nav .current-menu-item>a{ color:var(--sg-gold); }
.sg-header__cta{ display:flex; align-items:center; gap:22px; }
.sg-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:0; }
.sg-burger span{ width:26px; height:2px; background:var(--sg-white); }

.sg-mobile-nav{ position:fixed; inset:0; background:var(--sg-black-2); z-index:1000; transform:translateX(100%); transition:.4s ease; padding:100px 32px; }
.sg-mobile-nav.is-open{ transform:translateX(0); }
.sg-mobile-nav ul{ display:flex; flex-direction:column; gap:24px; }
.sg-mobile-nav a{ font-size:24px; font-family:var(--sg-font-heading); }
.sg-mobile-close{ position:absolute; top:32px; right:32px; background:none; border:0; color:var(--sg-white); font-size:28px; cursor:pointer; }

/* =========================================================
   5. HERO
   ========================================================= */
.sg-hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:120px; }
.sg-hero__canvas{ position:absolute; inset:0; z-index:0; opacity:.9; }
.sg-hero__glow{ position:absolute; width:60vw; height:60vw; border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,0.18),transparent 70%); top:-10%; right:-10%; filter:blur(40px); pointer-events:none; }
.sg-hero__content{ position:relative; z-index:2; max-width:820px; }
.sg-hero h1{ font-size:clamp(36px,5.4vw,64px); }
.sg-hero__actions{ display:flex; gap:18px; margin-top:36px; flex-wrap:wrap; }
.sg-hero__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:90px; position:relative; z-index:2; }
.sg-stat{ text-align:left; border-left:1px solid var(--sg-grey-line); padding-left:20px; }
.sg-stat__num{ font-family:var(--sg-font-heading); font-size:40px; color:var(--sg-gold); }
.sg-stat__label{ font-size:13px; color:var(--sg-grey); text-transform:uppercase; letter-spacing:1px; margin-top:6px; }

/* =========================================================
   6. GRID / SERVICES
   ========================================================= */
.sg-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.sg-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.sg-service-card{ position:relative; }
.sg-service-card__icon{ width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.02)); display:flex; align-items:center; justify-content:center; margin-bottom:24px; border:1px solid var(--sg-glass-border); }
.sg-service-card__icon img{ max-height:28px; }
.sg-service-card h3{ font-size:20px; }
.sg-service-card a.sg-more{ color:var(--sg-gold); font-size:13px; text-transform:uppercase; letter-spacing:1px; }

/* =========================================================
   7. ABOUT / WHY CHOOSE
   ========================================================= */
.sg-about{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.sg-about__visual{ position:relative; border-radius:var(--sg-radius); overflow:hidden; aspect-ratio:4/5; background:linear-gradient(160deg,var(--sg-black-3),var(--sg-black)); border:1px solid var(--sg-grey-line); }
.sg-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:60px; }
.sg-why-item{ padding:28px 0; border-top:1px solid var(--sg-grey-line); }
.sg-why-item span{ display:block; color:var(--sg-gold); font-size:12px; letter-spacing:2px; margin-bottom:12px; }

/* =========================================================
   8. PROCESS TIMELINE
   ========================================================= */
.sg-timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.sg-timeline::before{ content:''; position:absolute; top:24px; left:0; right:0; height:1px; background:var(--sg-grey-line); }
.sg-timeline__item{ position:relative; padding-top:60px; }
.sg-timeline__num{ position:absolute; top:0; left:0; width:48px; height:48px; border-radius:50%; border:1px solid var(--sg-gold); display:flex; align-items:center; justify-content:center; color:var(--sg-gold); font-family:var(--sg-font-heading); background:var(--sg-black); }

/* =========================================================
   9. TESTIMONIALS
   ========================================================= */
.sg-testimonial-track{ display:flex; gap:28px; overflow:hidden; }
.sg-testimonial{ min-width:100%; }
.sg-testimonial blockquote{ font-family:var(--sg-font-heading); font-size:24px; color:var(--sg-white); font-style:italic; margin:0 0 24px; }
.sg-testimonial cite{ color:var(--sg-gold); font-style:normal; font-size:14px; letter-spacing:1px; text-transform:uppercase; }
.sg-testimonial-nav{ display:flex; gap:14px; margin-top:32px; }
.sg-testimonial-nav button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--sg-grey-line); background:transparent; color:var(--sg-white); cursor:pointer; }
.sg-testimonial-nav button:hover{ border-color:var(--sg-gold); color:var(--sg-gold); }

/* =========================================================
   10. FAQ
   ========================================================= */
.sg-faq-item{ border-bottom:1px solid var(--sg-grey-line); padding:26px 0; cursor:pointer; }
.sg-faq-item__q{ display:flex; justify-content:space-between; align-items:center; font-size:18px; font-weight:600; }
.sg-faq-item__a{ max-height:0; overflow:hidden; transition:max-height .4s ease; color:var(--sg-grey); }
.sg-faq-item.is-open .sg-faq-item__a{ max-height:400px; padding-top:16px; }
.sg-faq-item__q .plus{ color:var(--sg-gold); font-size:22px; transition:.3s; }
.sg-faq-item.is-open .plus{ transform:rotate(45deg); }

/* =========================================================
   11. CTA / NEWSLETTER
   ========================================================= */
.sg-cta{ text-align:center; border-radius:var(--sg-radius); padding:80px 40px; background:linear-gradient(135deg,var(--sg-black-3),var(--sg-black-2)); border:1px solid var(--sg-glass-border); position:relative; overflow:hidden; }
.sg-newsletter form{ display:flex; gap:12px; max-width:460px; margin:0 auto; }
.sg-newsletter input[type=email]{ flex:1; padding:16px 20px; border-radius:100px; border:1px solid var(--sg-grey-line); background:rgba(255,255,255,0.03); color:#fff; }

/* =========================================================
   12. CONTACT
   ========================================================= */
.sg-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.sg-contact-info__item{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--sg-grey-line); }
.sg-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.sg-form-row.full{ grid-template-columns:1fr; }
.sg-input, .sg-textarea, select.sg-input{
  width:100%; padding:16px 18px; border-radius:12px; border:1px solid var(--sg-grey-line);
  background:rgba(255,255,255,0.03); color:#fff; font-family:var(--sg-font-body); font-size:15px;
}
.sg-input:focus, .sg-textarea:focus{ outline:none; border-color:var(--sg-gold); }
.sg-map{ border-radius:var(--sg-radius); overflow:hidden; border:1px solid var(--sg-grey-line); }
.sg-form-msg{ margin-top:16px; padding:14px 18px; border-radius:10px; font-size:14px; }
.sg-form-msg.success{ background:rgba(212,175,55,0.12); color:var(--sg-gold); }
.sg-form-msg.error{ background:rgba(255,80,80,0.12); color:#ff8080; }

/* =========================================================
   13. FOOTER
   ========================================================= */
.sg-footer{ background:var(--sg-black-2); border-top:1px solid var(--sg-grey-line); padding:90px 0 30px; }
.sg-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.sg-footer h4{ color:var(--sg-white); font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:22px; }
.sg-footer ul li{ margin-bottom:12px; }
.sg-footer a{ color:var(--sg-grey); transition:.3s; }
.sg-footer a:hover{ color:var(--sg-gold); }
.sg-footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:70px; padding-top:26px; border-top:1px solid var(--sg-grey-line); color:var(--sg-grey); font-size:13px; flex-wrap:wrap; gap:12px; }
.sg-socials{ display:flex; gap:14px; }
.sg-socials a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--sg-grey-line); display:flex; align-items:center; justify-content:center; }
.sg-socials a:hover{ border-color:var(--sg-gold); color:var(--sg-gold); }

/* =========================================================
   14. UTILITIES / REVEAL / COUNTERS
   ========================================================= */
.reveal-up{ opacity:0; transform:translateY(40px); }
.sg-cursor-glow{ position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1; background:radial-gradient(circle,rgba(212,175,55,0.10),transparent 70%); transform:translate(-50%,-50%); transition:opacity .3s; }

/* =========================================================
   15. BLOG / ARCHIVE / SINGLE
   ========================================================= */
.sg-post-card{ display:flex; flex-direction:column; gap:18px; }
.sg-post-card img{ border-radius:var(--sg-radius-sm); aspect-ratio:16/10; object-fit:cover; }
.sg-post-meta{ color:var(--sg-gold); font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.sg-pagination{ display:flex; gap:10px; justify-content:center; margin-top:60px; }
.sg-pagination a, .sg-pagination span{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--sg-grey-line); }
.sg-pagination .current{ background:var(--sg-gold); color:#0D1117; border-color:var(--sg-gold); }
.sg-single article{ max-width:800px; margin:0 auto; }
.sg-single .sg-post-meta{ margin-bottom:20px; }
.sg-single-content{ color:#d1d5db; }
.sg-single-content h2, .sg-single-content h3{ color:#fff; margin-top:1.6em; }
.sg-comments{ max-width:800px; margin:60px auto 0; }
.sg-sidebar .widget{ margin-bottom:40px; }
.sg-sidebar .widget-title{ font-family:var(--sg-font-heading); color:var(--sg-gold); margin-bottom:18px; }

/* 404 */
.sg-404{ text-align:center; padding:180px 0; }
.sg-404 h1{ font-size:120px; color:var(--sg-gold); }

/* =========================================================
   16. RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .sg-about{ grid-template-columns:1fr; }
  .sg-grid-3{ grid-template-columns:repeat(2,1fr); }
  .sg-why-grid{ grid-template-columns:repeat(2,1fr); }
  .sg-timeline{ grid-template-columns:repeat(2,1fr); }
  .sg-timeline::before{ display:none; }
  .sg-footer-grid{ grid-template-columns:1fr 1fr; }
  .sg-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .sg-nav, .sg-header__cta .sg-btn{ display:none; }
  .sg-burger{ display:flex; }
  .sg-hero__stats{ grid-template-columns:repeat(2,1fr); }
  .sg-grid-3, .sg-grid-2{ grid-template-columns:1fr; }
  .sg-why-grid{ grid-template-columns:1fr; }
  .sg-timeline{ grid-template-columns:1fr; }
  .sg-footer-grid{ grid-template-columns:1fr; }
  .sg-form-row{ grid-template-columns:1fr; }
  .sg-section{ padding:80px 0; }
}