/* =========================================================
   The Nexel Group — Master Stylesheet
   Dark gold luxury theme · Playfair Display + Inter
   Default: dark jet (#0C0B0F) with champagne gold (#C9A862)
   Light override: [data-theme="light"] warm cream
   ========================================================= */

:root{
  --bg:           #0C0B0F;
  --bg-soft:      #15141A;
  --bg-card:      #1C1B22;
  --surface:      #1C1B22CC;
  --ink:          #F4EAD2;
  --ink-soft:     #C9BFA5;
  --ink-mute:     #8A8270;
  --line:         #2A2832;
  --line-strong:  #3C3946;
  --primary:      #C9A862;
  --primary-2:    #E8D098;
  --accent:       #A07820;
  --success:      #34D399;
  --warn:         #E8D098;
  --danger:       #F87171;
  --gradient:     linear-gradient(135deg,#8B6914 0%,#C9A862 50%,#E8D098 100%);
  --gradient-sheen:linear-gradient(135deg,#6B4A0A 0%,#A07820 22%,#E8D098 50%,#A07820 78%,#6B4A0A 100%);
  --gradient-soft:linear-gradient(135deg,rgba(201,168,98,.12),rgba(232,208,152,.10),rgba(160,120,32,.10));
  --shadow-sm:    0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.35);
  --shadow:       0 10px 28px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.40);
  --shadow-lg:    0 28px 70px rgba(0,0,0,.65), 0 10px 28px rgba(0,0,0,.50);
  --shadow-glow:  0 14px 44px rgba(201,168,98,.32);
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    18px;
  --radius-xl:    28px;
  --font:         "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display: "Playfair Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --tr:           .25s cubic-bezier(.4,.0,.2,1);
  --tr-slow:      .6s cubic-bezier(.4,.0,.2,1);
  --max:          1240px;
}

/* ── Warm cream light mode ── */
[data-theme="light"]{
  --bg:           #F2EBD3;
  --bg-soft:      #E5DBBC;
  --bg-card:      #F9F1DA;
  --surface:      #F9F1DACC;
  --ink:          #0C0B0F;
  --ink-soft:     #2A2832;
  --ink-mute:     #5A5764;
  --line:         #D8CAA8;
  --line-strong:  #B9A982;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.08);
  --shadow:       0 8px 24px rgba(0,0,0,.12);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.18);
  --shadow-glow:  0 12px 40px rgba(201,168,98,.28);
}

/* ==================== RESET ==================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
a{color:var(--primary); text-decoration:none; transition:color var(--tr)}
a:hover{color:var(--primary-2)}
button{font:inherit; cursor:pointer; border:none; background:transparent; color:inherit}
input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--primary); outline-offset:3px; border-radius:4px}

/* ==================== TYPOGRAPHY ==================== */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); font-weight:700; line-height:1.14; margin:0 0 .6em; letter-spacing:-.015em; color:var(--ink)}
h1{font-size:clamp(2.4rem,5vw + 1rem,5rem)}
h2{font-size:clamp(1.9rem,3vw + 1rem,3.2rem)}
h3{font-size:clamp(1.25rem,1.4vw + 1rem,1.85rem)}
h4{font-size:1.2rem}
p{margin:0 0 1em}
.lead{font-size:clamp(1rem,.5vw + 1rem,1.2rem); color:var(--ink-soft); max-width:62ch; line-height:1.7}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; padding:.32rem .85rem;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary); background:rgba(201,168,98,.08); border:1px solid rgba(201,168,98,.22); border-radius:4px;
  font-family:var(--font);
}
.eyebrow::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gradient); flex-shrink:0}
/* Metallic champagne-gold sheen — luxury, with a slow moving highlight */
.gradient-text,.metal-gold{
  background:linear-gradient(110deg,#6B4A0A 0%,#A07820 14%,#E8D098 30%,#FBF1D2 44%,#E8D098 56%,#C9A862 70%,#8B6914 86%,#5A3D08 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  animation:goldSheen 7s linear infinite;
}
@keyframes goldSheen{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@media (prefers-reduced-motion:reduce){.gradient-text,.metal-gold{animation:none}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes sweep{50%,100%{transform:translateX(100%)}}

/* ==================== LAYOUT ==================== */
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 1.5rem}
.section{padding:clamp(3.5rem,7vw,7rem) 0}
.section-tight{padding:clamp(2rem,4vw,4rem) 0}
.grid{display:grid; gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.center{text-align:center}
.section-head{max-width:760px; margin:0 auto 3.5rem; text-align:center}
.section-head h2{margin-bottom:.6rem}
.section-head .lead{margin:0 auto}

/* ==================== TOP BAR ==================== */
.topbar{
  background:var(--gradient); color:#0C0B0F; font-size:.8rem; font-weight:500;
  padding:.55rem 1rem; text-align:center; position:relative; overflow:hidden; letter-spacing:.02em;
}
.topbar a{color:#0C0B0F; text-decoration:underline; font-weight:700; opacity:.85}
.topbar a:hover{opacity:1}
.topbar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:translateX(-100%); animation:sweep 6s infinite;
}

/* ==================== NAV ==================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(12,11,15,.92); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(201,168,98,.08);
  transition:box-shadow var(--tr);
}
.nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.5)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.5rem; max-width:var(--max); margin:0 auto}
.brand{display:flex; align-items:center; gap:.75rem; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink)}
.brand img{width:40px; height:40px}
.brand span small{display:block; font-size:.6rem; font-weight:500; color:var(--ink-mute); letter-spacing:.14em; text-transform:uppercase; margin-top:2px; font-family:var(--font)}
.nav-links{display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0}
.nav-links a{
  color:var(--ink-soft); padding:.5rem .85rem; border-radius:var(--radius-sm); font-weight:500; font-size:.88rem;
  position:relative; transition:all var(--tr); letter-spacing:.01em; white-space:nowrap;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--primary); background:rgba(201,168,98,.08)}
.nav-actions{display:flex; align-items:center; gap:.55rem}
.icon-btn{
  width:38px; height:38px; display:inline-grid; place-items:center; border-radius:var(--radius-sm);
  background:transparent; color:var(--ink-soft); border:1px solid transparent; transition:all var(--tr);
}
.icon-btn:hover{background:rgba(201,168,98,.08); color:var(--primary); border-color:rgba(201,168,98,.18)}
.icon-btn svg{width:18px; height:18px}
.menu-toggle{display:none}

/* dropdown */
.has-drop{position:relative}
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:280px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:.5rem; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--tr); list-style:none; margin:0;
}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1; visibility:visible; transform:none}
.dropdown li a{display:block; padding:.55rem .8rem; border-radius:var(--radius-sm); color:var(--ink); font-weight:500; font-size:.88rem}
.dropdown li a:hover{background:var(--bg-soft); color:var(--primary)}
.dropdown small{display:block; color:var(--ink-mute); font-weight:400; font-size:.78rem; margin-top:2px}

/* ==================== BUTTONS ==================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.5rem; font-weight:600; font-size:.88rem; border-radius:var(--radius-sm);
  transition:transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr);
  white-space:nowrap; cursor:pointer; line-height:1; border:1px solid transparent;
  letter-spacing:.04em; text-transform:uppercase; font-family:var(--font);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--gradient); color:#0C0B0F; box-shadow:var(--shadow-glow); font-weight:700}
.btn-primary:hover{box-shadow:0 18px 50px rgba(201,168,98,.45); color:#0C0B0F}
.btn-outline{background:transparent; color:var(--ink); border-color:rgba(201,168,98,.25)}
.btn-outline:hover{background:rgba(201,168,98,.06); border-color:var(--primary); color:var(--primary)}
.btn-ghost{background:rgba(201,168,98,.06); color:var(--ink)}
.btn-ghost:hover{background:rgba(201,168,98,.12)}
.btn-sm{padding:.5rem .9rem; font-size:.78rem}
.btn-lg{padding:1rem 1.8rem; font-size:.95rem}
.btn svg{width:17px; height:17px}

/* ==================== HERO ==================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(1000px 500px at 105% -5%, rgba(201,168,98,.09), transparent 60%),
    radial-gradient(800px 400px at -5% 15%, rgba(139,105,20,.07), transparent 60%),
    var(--bg);
  overflow:hidden;
  padding:6rem 0 3rem;
}
.hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center; width:100%;
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .hero{min-height:auto; padding:8rem 0 4rem}
}
.hero h1{margin-bottom:1.2rem}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem}
.hero-meta{display:flex; flex-wrap:wrap; gap:2rem; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid rgba(201,168,98,.12)}
.hero-meta div strong{display:block; font-size:1.8rem; font-family:var(--font-display); background:linear-gradient(110deg,#6B4A0A,#A07820 14%,#E8D098 30%,#FBF1D2 44%,#E8D098 56%,#C9A862 70%,#8B6914 86%,#5A3D08); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; animation:goldSheen 7s linear infinite}
.hero-meta div span{font-size:.75rem; color:var(--ink-mute); margin-top:.25rem; display:block; letter-spacing:.06em; text-transform:uppercase}

/* hero right — 3D visual area */
.hero-visual{position:relative; height:clamp(480px,60vh,720px)}
#heroCanvas3D{position:absolute; inset:0; width:100%; height:100%}
.hero-visual-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:130%; height:130%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(201,168,98,.1) 0%, transparent 65%);
}
/* Remove the old float-chip/orb elements */
.orb,.float-chip,.hero-card{display:none}

/* Elegant status bar at base of 3D canvas */
.hero-status{
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; align-items:center; gap:1.75rem;
  background:rgba(12,11,15,.8); border:1px solid rgba(201,168,98,.14);
  border-radius:var(--radius); padding:.6rem 1.4rem; backdrop-filter:blur(14px);
  white-space:nowrap;
}
.hero-status-item{display:flex; align-items:center; gap:.5rem; font-size:.72rem; color:var(--ink-mute); letter-spacing:.05em; text-transform:uppercase; font-weight:500}
.hero-status-item strong{color:var(--primary); font-weight:700; font-family:var(--font-display); font-size:.85rem}
.hero-status-dot{width:5px; height:5px; border-radius:50%; background:var(--success); flex-shrink:0; box-shadow:0 0 5px rgba(52,211,153,.7); animation:pulseDot 2s infinite}

/* trusted bar */
.trusted{padding:1.4rem 0; border-top:1px solid rgba(201,168,98,.08); border-bottom:1px solid rgba(201,168,98,.08); background:var(--bg-card)}
.trusted-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; padding:0 1.5rem; max-width:var(--max); margin:0 auto}
.trusted-label{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; font-family:var(--font)}
.trusted-list{display:flex; flex-wrap:wrap; gap:2.5rem; align-items:center; color:var(--ink-mute); font-family:var(--font-display); font-weight:700; opacity:.6}
.trusted-list span{font-size:1rem; letter-spacing:.06em}

/* particles bg */
.particles{position:absolute; inset:0; pointer-events:none; z-index:0}
.particles canvas{width:100%; height:100%}

/* ==================== CARDS ==================== */
.card{
  background:var(--bg-card); border:1px solid rgba(201,168,98,.1); border-radius:var(--radius-lg);
  padding:1.75rem; transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(201,168,98,.25)}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform var(--tr-slow);
}
.card:hover::before{transform:scaleX(1)}
.card-icon{
  width:50px; height:50px; border-radius:var(--radius-sm); display:grid; place-items:center; margin-bottom:1.1rem;
  background:rgba(201,168,98,.09); color:var(--primary); border:1px solid rgba(201,168,98,.14);
}
.card-icon svg{width:22px; height:22px}
.card h3{margin-bottom:.4rem; font-size:1.15rem; color:var(--ink)}
.card p{color:var(--ink-soft); font-size:.92rem; margin-bottom:.8rem}
.card a.more{font-weight:600; font-size:.85rem; display:inline-flex; gap:.3rem; align-items:center; color:var(--primary); letter-spacing:.04em; text-transform:uppercase}
.card a.more::after{content:"→"; transition:transform var(--tr)}
.card a.more:hover::after{transform:translateX(4px)}

/* feature grid */
.feature{
  display:flex; gap:1rem; padding:1.2rem; border:1px solid rgba(201,168,98,.1); border-radius:var(--radius);
  background:var(--bg-card); transition:all var(--tr);
}
.feature:hover{border-color:rgba(201,168,98,.3); box-shadow:var(--shadow)}
.feature .ic{flex:0 0 42px; height:42px; border-radius:var(--radius-sm); background:rgba(201,168,98,.09); display:grid; place-items:center; color:var(--primary)}
.feature h4{margin:0 0 .25rem; font-size:1rem; color:var(--ink)}
.feature p{margin:0; font-size:.88rem; color:var(--ink-mute)}

/* stats strip */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.5rem; padding:2rem; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid rgba(201,168,98,.1); box-shadow:var(--shadow)}
.stat strong{display:block; font-family:var(--font-display); font-size:clamp(1.9rem,3vw,2.6rem); background:linear-gradient(110deg,#6B4A0A,#A07820 14%,#E8D098 30%,#FBF1D2 44%,#E8D098 56%,#C9A862 70%,#8B6914 86%,#5A3D08); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; animation:goldSheen 7s linear infinite}
.stat span{color:var(--ink-mute); font-size:.8rem; margin-top:.3rem; display:block; letter-spacing:.06em; text-transform:uppercase}

/* timeline */
.timeline{position:relative; max-width:780px; margin:0 auto; padding:1rem 0}
.timeline::before{content:""; position:absolute; left:18px; top:0; bottom:0; width:1px; background:linear-gradient(180deg,var(--primary),var(--accent))}
.tl-item{position:relative; padding:1rem 1rem 1.6rem 3rem}
.tl-item::before{content:""; position:absolute; left:11px; top:1.4rem; width:16px; height:16px; border-radius:50%; background:var(--bg-card); border:2px solid var(--primary); box-shadow:0 0 0 4px rgba(201,168,98,.12)}
.tl-item h4{margin:0 0 .25rem; color:var(--ink)}
.tl-item time{color:var(--primary); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; font-family:var(--font)}

/* testimonials */
.testimonial{background:var(--bg-card); border:1px solid rgba(201,168,98,.1); border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--shadow-sm)}
.testimonial blockquote{margin:0 0 1rem; font-size:1rem; color:var(--ink); font-style:italic; line-height:1.65}
.testimonial blockquote::before{content:"\201C"; font-family:var(--font-display); font-size:3rem; color:var(--primary); line-height:0; vertical-align:-.4em; margin-right:.2rem}
.testimonial .who{display:flex; align-items:center; gap:.8rem}
.avatar{width:42px; height:42px; border-radius:50%; background:var(--gradient); color:#0C0B0F; display:grid; place-items:center; font-weight:700; font-family:var(--font-display); font-size:.88rem}
.testimonial .who strong{display:block; color:var(--ink)}
.testimonial .who span{color:var(--ink-mute); font-size:.82rem}

/* pricing */
.pricing-grid{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.price{background:var(--bg-card); border:1px solid rgba(201,168,98,.1); border-radius:var(--radius-lg); padding:2rem; position:relative; transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr)}
.price:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(201,168,98,.3)}
.price.featured{background:linear-gradient(145deg,#0F0E12,#1A1810,#0F0E12); border-color:rgba(201,168,98,.3); box-shadow:0 0 60px rgba(201,168,98,.1)}
.price.featured h3,.price.featured p,.price.featured .amount{color:var(--ink)}
.price.featured .btn-primary{background:var(--gradient); color:#0C0B0F}
.price.featured ul li{color:var(--ink-soft)}
.price h3{font-size:1.15rem; margin-bottom:.4rem; color:var(--ink)}
.price .amount{font-family:var(--font-display); font-size:2.4rem; font-weight:700; line-height:1; margin:.6rem 0; color:var(--ink)}
.price .amount small{font-size:.9rem; font-weight:500; color:var(--ink-mute); font-family:var(--font)}
.price ul{list-style:none; padding:0; margin:1rem 0 1.4rem; display:grid; gap:.55rem}
.price ul li{display:flex; gap:.5rem; align-items:flex-start; font-size:.88rem; color:var(--ink-soft)}
.price ul li::before{content:""; width:16px; height:16px; flex-shrink:0; margin-top:2px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat}
.badge-pop{position:absolute; top:-12px; right:1.5rem; padding:.28rem .7rem; background:var(--gradient); color:#0C0B0F; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-radius:4px; font-family:var(--font)}

/* FAQ */
.faq details{
  background:var(--bg-card); border:1px solid rgba(201,168,98,.1); border-radius:var(--radius); margin-bottom:.7rem;
  padding:0 1.2rem; transition:all var(--tr);
}
.faq details[open]{box-shadow:var(--shadow); border-color:rgba(201,168,98,.3)}
.faq summary{padding:1.1rem 0; cursor:pointer; font-weight:700; font-family:var(--font-display); display:flex; justify-content:space-between; align-items:center; list-style:none; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.4rem; color:var(--primary); transition:transform var(--tr); font-family:var(--font)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > p{padding:0 0 1.1rem; color:var(--ink-soft); margin:0; font-size:.92rem; line-height:1.68}

/* CTA banner */
.cta-band{
  background:linear-gradient(145deg, #0F0E12, #1A1810, #0F0E12);
  border:1px solid rgba(201,168,98,.2);
  border-radius:var(--radius-xl); padding:clamp(2.5rem,5vw,4.5rem);
  color:var(--ink); display:grid; gap:1.5rem; grid-template-columns:1.4fr 1fr; align-items:center;
  box-shadow:var(--shadow-glow); position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; background:radial-gradient(circle,rgba(201,168,98,.12),transparent 65%);
  pointer-events:none;
}
.cta-band h2,.cta-band p{position:relative; z-index:1}
.cta-band .actions{display:flex; gap:.7rem; flex-wrap:wrap; position:relative; z-index:1}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}}

/* ==================== FORMS ==================== */
.form-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:flex; flex-direction:column; gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-weight:600; font-size:.85rem; color:var(--ink-soft); letter-spacing:.02em}
.field input,.field textarea,.field select{
  width:100%; padding:.82rem 1rem; border:1px solid var(--line-strong); background:var(--bg-card);
  border-radius:var(--radius-sm); transition:border var(--tr), box-shadow var(--tr); font-size:.92rem; color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(201,168,98,.14); outline:none;
}
.field .hint{font-size:.78rem; color:var(--ink-mute)}
.field.err input,.field.err textarea{border-color:var(--danger); box-shadow:0 0 0 3px rgba(248,113,113,.12)}
.field .errmsg{color:var(--danger); font-size:.78rem; display:none}
.field.err .errmsg{display:block}
.check-row{display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:var(--ink-soft)}
.check-row input[type="checkbox"]{margin-top:3px; width:16px; height:16px; accent-color:var(--primary)}
.form-alert{display:none; padding:.9rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.88rem}
.form-alert.success{display:block; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); color:#34D399}

/* ==================== FOOTER ==================== */
footer{background:var(--bg-card); border-top:1px solid rgba(201,168,98,.08); padding:3.5rem 0 1.5rem; color:var(--ink-soft)}
.footer-grid{display:grid; gap:2rem; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-col h5{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:1rem; font-family:var(--font); font-weight:700}
.footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.footer-col a{color:var(--ink-soft); font-size:.88rem}
.footer-col a:hover{color:var(--primary)}
.footer-brand p{max-width:34ch; margin:1rem 0; font-size:.9rem}
.socials{display:flex; gap:.5rem; margin-top:1rem}
.socials a{width:36px; height:36px; border-radius:var(--radius-sm); background:rgba(201,168,98,.08); display:grid; place-items:center; color:var(--ink-soft); transition:all var(--tr)}
.socials a:hover{background:var(--gradient); color:#0C0B0F; transform:translateY(-3px)}
.newsletter-mini{display:flex; gap:.4rem; margin-top:.6rem}
.newsletter-mini input{flex:1; padding:.62rem .8rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg); font-size:.88rem; color:var(--ink)}
.newsletter-mini button{padding:.62rem 1rem; border-radius:var(--radius-sm); background:var(--gradient); color:#0C0B0F; font-weight:700; font-size:.85rem}
.footer-base{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:1.4rem; margin-top:2.2rem; border-top:1px solid rgba(201,168,98,.08); font-size:.8rem; color:var(--ink-mute)}
.footer-base ul{display:flex; gap:1rem; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.footer-base a{color:var(--ink-mute)}
.footer-base a:hover{color:var(--primary)}

/* ==================== CHATBOT WIDGET ==================== */
.chat-fab{
  position:fixed; bottom:24px; right:24px; z-index:90; width:56px; height:56px; border-radius:var(--radius-sm);
  background:var(--gradient); color:#0C0B0F; display:grid; place-items:center; box-shadow:var(--shadow-glow);
  cursor:pointer; transition:transform var(--tr), box-shadow var(--tr); border:none;
}
.chat-fab:hover{transform:scale(1.06); box-shadow:0 16px 40px rgba(201,168,98,.45)}
.chat-fab svg{width:24px; height:24px}
.chat-fab .ping{position:absolute; inset:-4px; border-radius:var(--radius-sm); border:2px solid var(--primary); animation:ping 2s ease-out infinite; opacity:.5}
@keyframes ping{to{transform:scale(1.35); opacity:0}}
.chat-window{
  position:fixed; bottom:92px; right:24px; z-index:91; width:min(380px,calc(100% - 32px));
  height:min(540px,calc(100vh - 140px)); background:var(--bg-card); border:1px solid rgba(201,168,98,.15);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:none; flex-direction:column; overflow:hidden;
  transform:translateY(16px) scale(.97); opacity:0; transition:all var(--tr);
}
.chat-window.open{display:flex; transform:none; opacity:1}
.chat-header{background:linear-gradient(135deg,#8B6914,#C9A862); color:#0C0B0F; padding:1rem 1.1rem; display:flex; align-items:center; gap:.7rem}
.chat-avatar{width:36px; height:36px; border-radius:50%; background:rgba(12,11,15,.2); display:grid; place-items:center; font-weight:700; font-family:var(--font-display); font-size:.9rem; color:#0C0B0F}
.chat-header strong{display:block; font-size:.92rem; font-family:var(--font-display); color:#0C0B0F}
.chat-header small{font-size:.74rem; opacity:.7; color:#0C0B0F}
.chat-close{margin-left:auto; color:#0C0B0F; opacity:.75; background:transparent; border:none; cursor:pointer; padding:.3rem; border-radius:var(--radius-sm); font-size:1rem}
.chat-close:hover{opacity:1; background:rgba(12,11,15,.12)}
.chat-body{flex:1; padding:1rem; overflow-y:auto; display:flex; flex-direction:column; gap:.6rem; background:var(--bg-soft)}
.bubble{max-width:84%; padding:.7rem .9rem; border-radius:14px; font-size:.9rem; line-height:1.5}
.bubble.bot{background:var(--bg-card); border:1px solid rgba(201,168,98,.12); border-bottom-left-radius:4px; color:var(--ink)}
.bubble.user{align-self:flex-end; background:var(--gradient); color:#0C0B0F; border-bottom-right-radius:4px; font-weight:500}
.chat-suggest{display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem .9rem}
.chat-suggest button{padding:.38rem .7rem; background:var(--bg-card); border:1px solid rgba(201,168,98,.15); border-radius:4px; font-size:.78rem; color:var(--ink-soft); cursor:pointer; transition:all var(--tr); letter-spacing:.02em}
.chat-suggest button:hover{background:rgba(201,168,98,.1); color:var(--primary); border-color:rgba(201,168,98,.3)}
.chat-form{display:flex; gap:.5rem; padding:.65rem; border-top:1px solid rgba(201,168,98,.1); background:var(--bg-card)}
.chat-form input{flex:1; padding:.65rem .85rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:.88rem; background:var(--bg); color:var(--ink)}
.chat-form input:focus{border-color:var(--primary); outline:none}
.chat-form button{background:var(--gradient); color:#0C0B0F; padding:.65rem; border-radius:var(--radius-sm); width:40px; display:grid; place-items:center; font-weight:700}
.chat-form button svg{width:16px; height:16px}
.typing{display:inline-flex; gap:3px; padding:.6rem .9rem; background:var(--bg-card); border:1px solid rgba(201,168,98,.12); border-radius:14px; border-bottom-left-radius:4px; width:fit-content}
.typing span{width:6px; height:6px; background:var(--ink-mute); border-radius:50%; animation:typing 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

/* ==================== ROI CALCULATOR ==================== */
.roi-card{
  background:var(--bg-card); border:1px solid rgba(201,168,98,.1); border-radius:var(--radius-lg);
  padding:2rem; box-shadow:var(--shadow); display:grid; gap:1.5rem; grid-template-columns:1fr 1fr;
}
@media (max-width:760px){.roi-card{grid-template-columns:1fr}}
.roi-card .roi-inputs label{display:block; font-weight:600; margin-bottom:.3rem; font-size:.85rem; color:var(--ink-soft)}
.roi-card .roi-inputs .row{margin-bottom:1rem}
.roi-card input[type="range"]{width:100%; accent-color:var(--primary)}
.roi-card .rng-val{font-weight:700; font-family:var(--font-display); color:var(--primary)}
.roi-output{background:var(--gradient); color:#0C0B0F; border-radius:var(--radius); padding:1.5rem; text-align:center; display:flex; flex-direction:column; justify-content:center}
.roi-output span{font-size:.85rem; opacity:.75; display:block; font-weight:600; text-transform:uppercase; letter-spacing:.06em}
.roi-output strong{font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); display:block; margin:.4rem 0; color:#0C0B0F}
.roi-output em{font-style:normal; font-size:.82rem; opacity:.7}

/* ==================== TABS ==================== */
.tabs{border-bottom:1px solid rgba(201,168,98,.1); display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:2rem}
.tabs button{padding:.65rem 1rem; border-bottom:2px solid transparent; font-weight:600; color:var(--ink-mute); cursor:pointer; transition:all var(--tr); font-size:.88rem}
.tabs button.active{color:var(--primary); border-color:var(--primary)}
.tab-panel{display:none}
.tab-panel.active{display:block; animation:fadeIn .4s}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ==================== BLOG ==================== */
.post-card{background:var(--bg-card); border:1px solid rgba(201,168,98,.1); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--tr); display:flex; flex-direction:column}
.post-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(201,168,98,.25)}
.post-cover{aspect-ratio:16/9; background:var(--gradient); display:grid; place-items:center; color:#0C0B0F; font-size:2rem; font-family:var(--font-display); font-weight:700}
.post-card .post-body{padding:1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.post-meta{display:flex; gap:.6rem; font-size:.75rem; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font)}
.post-card h3{font-size:1.1rem; line-height:1.3; color:var(--ink)}
.post-card p{color:var(--ink-soft); font-size:.9rem; margin:0; flex:1}
.article{max-width:760px; margin:0 auto}
.article h1{margin-bottom:.5rem}
.article .post-meta{margin-bottom:2rem}
.article p,.article ul,.article ol{font-size:1.02rem; color:var(--ink-soft)}
.article h2,.article h3{margin-top:2rem; color:var(--ink)}
.article blockquote{border-left:3px solid var(--primary); padding:.6rem 1.2rem; background:rgba(201,168,98,.06); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink); font-style:italic; margin:1.5rem 0}

/* ==================== UTILITIES ==================== */
.reveal{opacity:0; transform:translateY(20px); transition:opacity var(--tr-slow), transform var(--tr-slow)}
.reveal.visible{opacity:1; transform:none}
.scroll-progress{position:fixed; top:0; left:0; right:0; height:2px; background:transparent; z-index:101}
.scroll-progress::after{content:""; display:block; height:100%; width:var(--prog,0%); background:var(--gradient); transition:width .1s}
.cursor-halo{position:fixed; top:0; left:0; width:32px; height:32px; border-radius:50%; pointer-events:none; z-index:9999; background:radial-gradient(circle,rgba(201,168,98,.25),transparent 70%); transform:translate(-50%,-50%); transition:opacity .25s; opacity:0}
@media (hover:hover){.cursor-halo{opacity:1}}
.toast{position:fixed; bottom:96px; left:24px; background:var(--bg-card); border:1px solid rgba(201,168,98,.2); border-left:3px solid var(--success); padding:.9rem 1.2rem; border-radius:var(--radius); box-shadow:var(--shadow-lg); font-size:.88rem; z-index:200; transform:translateY(20px); opacity:0; transition:all var(--tr); max-width:320px; color:var(--ink)}
.toast.show{opacity:1; transform:none}
.skip{position:absolute; left:-9999px; top:8px; background:var(--primary); color:#0C0B0F; padding:.6rem 1rem; border-radius:var(--radius-sm); z-index:200; font-weight:700}
.skip:focus{left:8px}

/* command palette */
.cmdk-back{position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); z-index:300; display:none; align-items:flex-start; justify-content:center; padding:10vh 1rem}
.cmdk-back.open{display:flex}
.cmdk{width:100%; max-width:560px; background:var(--bg-card); border:1px solid rgba(201,168,98,.2); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.cmdk input{width:100%; padding:1rem 1.2rem; border:none; border-bottom:1px solid rgba(201,168,98,.1); font-size:.95rem; background:transparent; color:var(--ink)}
.cmdk input:focus{outline:none}
.cmdk ul{list-style:none; margin:0; padding:.5rem; max-height:50vh; overflow-y:auto}
.cmdk li{padding:.65rem 1rem; border-radius:var(--radius-sm); cursor:pointer; display:flex; gap:.7rem; align-items:center; font-size:.9rem; color:var(--ink)}
.cmdk li:hover,.cmdk li.sel{background:rgba(201,168,98,.08); color:var(--primary)}
.cmdk li small{color:var(--ink-mute); margin-left:auto; font-size:.78rem}
.cmdk-hint{padding:.5rem .9rem; color:var(--ink-mute); font-size:.75rem; border-top:1px solid rgba(201,168,98,.08); display:flex; gap:1rem; flex-wrap:wrap}
.kbd{padding:.1rem .4rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:3px; font-family:monospace; font-size:.75rem}

/* responsive nav */
@media (max-width:920px){
  .nav-links{
    position:fixed; top:60px; left:0; right:0; background:var(--bg-card); border-bottom:1px solid rgba(201,168,98,.1);
    flex-direction:column; align-items:stretch; padding:1rem; gap:.2rem;
    transform:translateY(-110%); transition:transform var(--tr); z-index:99;
  }
  .nav-links.open{transform:none}
  .nav-links a{padding:.85rem 1rem}
  .menu-toggle{display:inline-grid}
  .has-drop .dropdown{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; padding:0 0 0 1rem; background:transparent}
}

/* print */
@media print{
  .nav,.topbar,.chat-fab,.chat-window,.scroll-progress,footer .socials,.cta-band{display:none !important}
  body{background:#fff; color:#000}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
}