*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#050506;--dark:#0d0d10;--dark2:#141418;--dark3:#1c1c22;
  --gold:#c9a84c;--gold2:#e8c97a;--gold3:#a07830;
  --silver:#b8bec9;--silver2:#d4d9e4;--muted:#6e727d;--white:#f5f4f0;
  --border-gold:rgba(201,168,76,0.2);--border-dark:rgba(255,255,255,0.06);
  --font-serif:'Cormorant Garamond',serif;--font-sans:'Outfit',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--black);color:var(--white);overflow-x:hidden;line-height:1.6}

/* ══ SCROLL PROGRESS (under top-bar) ══ */
#nav-progress{
  position:fixed;left:0;top:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--gold3),var(--gold2),var(--gold));
  z-index:300;transition:width 0.1s linear;
  box-shadow:0 0 8px rgba(201,168,76,0.6);
  opacity:0;
}
#nav-progress.visible{
  opacity:1;
}

/* ══ NAV SHELL ══ */
nav{
  position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.6rem 1.25rem;
  background:rgba(5,5,6,0.75);
  backdrop-filter:blur(20px);
  border:0.5px solid rgba(201,168,76,0.15);
  border-radius:999px;
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),padding 0.3s,background 0.3s,opacity 0.4s,top 0.3s;
  gap:1.5rem;
  max-width:max-content;
  width:auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
nav.scrolled{
  position:fixed;
  top:0.75rem;
  background:rgba(5,5,6,0.92);
  backdrop-filter:blur(24px);
  padding:0.5rem 1.25rem;
  border-radius:999px;
}

nav.scrolled{padding:0.5rem 2.5vw;background:rgba(5,5,6,0.97)}

/* ══ LEFT: hamburger + logo ══ */
.nav-left{display:flex;align-items:center;gap:0.9rem;flex-shrink:0}

/* Hamburger (always visible — left of logo) */
.nav-hamburger{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:38px;height:38px;cursor:pointer;background:rgba(255,255,255,0.06);
  border:0.5px solid rgba(255,255,255,0.1);border-radius:50%;
  padding:0;flex-shrink:0;
  transition:background 0.25s,border-color 0.25s,transform 0.3s
}
.nav-hamburger:hover{background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.3);transform:scale(1.08)}
.nav-hamburger span{
  display:block;height:1.5px;border-radius:2px;background:var(--silver2);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),
             opacity 0.25s,width 0.3s,background 0.25s
}
.nav-hamburger span:nth-child(1){width:16px;transform-origin:left center}
.nav-hamburger span:nth-child(2){width:12px}
.nav-hamburger span:nth-child(3){width:16px;transform-origin:left center}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(1px,-1px);width:16px;background:var(--gold2)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(1px,1px);width:16px;background:var(--gold2)}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:0.65rem;text-decoration:none;transition:transform 0.3s}
.nav-logo:hover{transform:scale(1.04)}
.nav-logo img{width:38px;height:38px;object-fit:contain;transition:filter 0.3s}
.nav-logo:hover img{filter:drop-shadow(0 0 10px rgba(201,168,76,0.5))}
.nav-brand{font-family:var(--font-serif);font-size:1.4rem;font-weight:600;letter-spacing:0.04em;color:var(--white)}
.nav-brand span{color:var(--gold)}

/* ══ CENTER: pill nav container ══ */
.nav-pill-wrap{
  flex:1;display:flex;justify-content:center;
}
.nav-links{
  display:flex;align-items:center;gap:0;list-style:none;
  background:rgba(255,255,255,0.05);
  border:0.5px solid rgba(255,255,255,0.1);
  border-radius:999px;
  padding:0.22rem 0.35rem;
  backdrop-filter:blur(8px);
}
.nav-links li{position:relative}
.nav-links a{
  text-decoration:none;
  color:rgba(255,255,255,0.65);
  font-size:0.8rem;font-weight:400;
  letter-spacing:0.03em;
  padding:0.42rem 1.1rem;
  border-radius:999px;
  display:inline-block;position:relative;
  transition:color 0.25s,background 0.25s,transform 0.2s;
  white-space:nowrap;
}
.nav-links a:hover{
  color:var(--white);
  background:rgba(255,255,255,0.09);
  transform:none;
}
/* active pill */
.nav-links a.active{
  background:rgba(201,168,76,0.18);
  color:var(--gold2);
  box-shadow:0 0 0 0.5px rgba(201,168,76,0.3);
}
/* kill old underline */
.nav-links a::after{display:none}

/* ══ RIGHT: CTA "Ask AI"-style ══ */
.nav-right{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
.nav-cta{
  display:inline-flex;align-items:center;gap:0.55rem;
  background:rgba(255,255,255,0.07);
  border:0.5px solid rgba(255,255,255,0.18);
  color:var(--white);font-weight:500;font-size:0.8rem;
  letter-spacing:0.04em;
  padding:0.45rem 1.1rem;border-radius:999px;
  text-decoration:none;position:relative;overflow:hidden;
  transition:background 0.25s,border-color 0.25s,box-shadow 0.25s,transform 0.2s;
  white-space:nowrap;
}
.nav-cta-icon{
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold3));
  display:flex;align-items:center;justify-content:center;
  font-size:0.65rem;flex-shrink:0;
  animation:ctaSpin 6s linear infinite;
}
@keyframes ctaSpin{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(40deg)}}
.nav-cta:hover{
  background:rgba(201,168,76,0.15);
  border-color:rgba(201,168,76,0.45);
  box-shadow:0 0 18px rgba(201,168,76,0.25);
  transform:translateY(-1px);
}
.nav-cta span{position:relative;z-index:1}

/* ══ MOBILE DRAWER ══ */
.nav-mobile{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(5,5,6,0.97);backdrop-filter:blur(20px);
  z-index:190;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  opacity:0;pointer-events:none;
  transition:opacity 0.35s ease
}
.nav-mobile.open{opacity:1;pointer-events:all}
.nav-mobile ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
.nav-mobile ul li{
  width:100%;text-align:center;
  transform:translateY(20px);opacity:0;
  transition:transform 0.4s ease,opacity 0.4s ease
}
.nav-mobile.open ul li{transform:translateY(0);opacity:1}
.nav-mobile.open ul li:nth-child(1){transition-delay:0.05s}
.nav-mobile.open ul li:nth-child(2){transition-delay:0.1s}
.nav-mobile.open ul li:nth-child(3){transition-delay:0.15s}
.nav-mobile.open ul li:nth-child(4){transition-delay:0.2s}
.nav-mobile.open ul li:nth-child(5){transition-delay:0.25s}
.nav-mobile.open ul li:nth-child(6){transition-delay:0.3s}
.nav-mobile ul li a{
  display:block;padding:1rem 2rem;
  font-family:var(--font-serif);font-size:2rem;font-weight:600;
  color:var(--silver);text-decoration:none;
  transition:color 0.2s,letter-spacing 0.2s
}
.nav-mobile ul li a:hover{color:var(--gold2);letter-spacing:0.05em}
.nav-mobile-cta{
  margin-top:2rem;
  transform:translateY(20px);opacity:0;
  transition:transform 0.4s ease 0.35s,opacity 0.4s ease 0.35s
}
.nav-mobile.open .nav-mobile-cta{transform:translateY(0);opacity:1}
.nav-mobile-divider{width:60px;height:0.5px;background:rgba(201,168,76,0.3);margin:1.5rem auto}

/* ══ RESPONSIVE ══ */
@media(max-width:960px){
  .nav-pill-wrap{display:none}
  nav{
    max-width:calc(100vw - 2rem);
    width:calc(100vw - 2rem);
    left:50%;
    transform:translateX(-50%);
    justify-content:space-between;
    gap:0.75rem;
    padding:0.5rem 1rem;
  }
  .nav-logo img{
    width:32px;height:32px;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .nav-brand{font-size:1.15rem}
  .nav-cta span:not(.nav-cta-icon){display:none}
  .nav-cta{padding:0.45rem 0.75rem;gap:0}
}
@media(max-width:768px){
  .hero-inner{flex-direction:column-reverse;padding:7rem 5vw 4rem;gap:2rem;text-align:center}
  .hero-content{text-align:center;max-width:100%}
  .hero-eyebrow{justify-content:center}
  .hero-btns{justify-content:center}
  .hero-main-img{max-width:280px}
}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:0;position:relative;overflow:hidden}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:4rem;padding:9rem 7vw 6rem;position:relative;z-index:1;min-height:100vh}
.hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 50% at 50% 20%,rgba(201,168,76,0.07) 0%,transparent 65%),radial-gradient(ellipse 40% 35% at 80% 80%,rgba(184,190,201,0.04) 0%,transparent 60%)}
.hero-lines{position:absolute;inset:0;z-index:0;overflow:hidden;background-image:linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%)}
.hero-content{position:relative;z-index:1;flex:1;text-align:left;max-width:580px}
.hero-logo{width:140px;height:140px;object-fit:contain;margin:0 auto 2.5rem;filter:drop-shadow(0 0 40px rgba(201,168,76,0.45));animation:logoPulse 4s ease-in-out infinite}
.hero-image-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.hero-main-img{width:100%;max-width:480px;height:auto;border-radius:4px;filter:drop-shadow(0 0 60px rgba(201,168,76,0.35));animation:heroImgFloat 6s ease-in-out infinite}
@keyframes heroImgFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 30px rgba(201,168,76,0.35))} 50%{filter:drop-shadow(0 0 65px rgba(201,168,76,0.7))}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:0.7rem;font-size:0.72rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;justify-content:flex-start}
.hero-eyebrow::before,.hero-eyebrow::after{content:'';display:block;width:36px;height:0.5px;background:var(--gold);opacity:0.5}
.hero h1{font-family:var(--font-serif);font-size:clamp(3rem,7.5vw,7rem);font-weight:600;line-height:1.05;letter-spacing:-0.01em;margin-bottom:0.5rem}
.line-gold{color:var(--gold2);font-style:italic}
.line-silver{color:var(--silver2)}
.hero-tagline{font-family:var(--font-serif);font-style:italic;font-size:clamp(1rem,2vw,1.35rem);color:var(--silver);margin-bottom:1.5rem;letter-spacing:0.02em}
.hero-desc{color:var(--muted);font-size:0.95rem;max-width:520px;margin:0 0 3rem;line-height:1.8;font-weight:300}
.hero-btns{display:flex;gap:1rem;justify-content:flex-start;flex-wrap:wrap}
.btn-gold{background:linear-gradient(135deg,var(--gold2) 0%,var(--gold) 50%,var(--gold3) 100%);color:var(--black);font-weight:600;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.9rem 2.2rem;border-radius:2px;text-decoration:none;box-shadow:0 0 32px rgba(201,168,76,0.3);transition:box-shadow 0.3s,transform 0.2s}
.btn-gold:hover{box-shadow:0 0 52px rgba(201,168,76,0.55);transform:translateY(-2px)}
.btn-outline{border:0.5px solid rgba(201,168,76,0.4);color:var(--gold2);font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:400;padding:0.9rem 2.2rem;border-radius:2px;text-decoration:none;transition:border-color 0.2s,background 0.2s}
.btn-outline:hover{border-color:var(--gold);background:rgba(201,168,76,0.06)}

.stats-strip {
    background: var(--dark2);
    border-top: 0.5px solid var(--border-gold);
    border-bottom: 0.5px solid var(--border-gold);
    padding: 2.5rem 5vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}
.stat-val{font-family:var(--font-serif);font-size:2.8rem;font-weight:700;background:linear-gradient(135deg,var(--gold2),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:0.35rem}
.stat-lbl{color:var(--muted);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:300}


section{padding:6rem 5vw}
.sec-tag{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;font-weight:500}
.sec-tag::before{content:'';width:20px;height:0.5px;background:var(--gold)}
.sec-title{font-family:var(--font-serif);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:600;line-height:1.12;letter-spacing:0.01em;margin-bottom:1.2rem}
.sec-title em{font-style:italic;color:var(--gold2)}
.sec-sub{color:var(--muted);font-size:0.95rem;line-height:1.8;max-width:520px;font-weight:300}
.centered{text-align:center}.centered .sec-sub{margin:0 auto}
.gold-divider{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto 3.5rem}
.gold-divider::before,.gold-divider::after{content:'';flex:1;max-width:200px;height:0.5px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.3))}
.gold-divider::after{background:linear-gradient(90deg,rgba(201,168,76,0.3),transparent)}
.divider-gem{color:var(--gold);font-size:0.5rem;letter-spacing:6px}

#services{background:var(--dark)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3.5rem;background:var(--border-gold);border:0.5px solid var(--border-gold);border-radius:4px;overflow:hidden}
.svc{background:var(--dark2);padding:2.25rem;transition:background 0.3s;position:relative;overflow:hidden}
.svc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity 0.3s}
.svc:hover{background:var(--dark3)}.svc:hover::after{opacity:1}
.svc-num{font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:rgba(242, 196, 68, 0.55);line-height:1;margin-bottom:1rem;display:block}
.svc h3{font-family:var(--font-serif);font-size:1.3rem;font-weight:600;margin-bottom:0.75rem;letter-spacing:0.01em;color:var(--white)}
.svc p{color:var(--muted);font-size:0.875rem;line-height:1.75;font-weight:300}
.svc-tech{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:1.25rem}
.svc-tech span{font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);border:0.5px solid rgba(201,168,76,0.3);padding:0.2rem 0.55rem;border-radius:1px}

#why{background:var(--black)}
.why-wrap{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-top:2rem}
.why-vis{position:relative;border-radius:4px;overflow:hidden;border:0.5px solid var(--border-gold);background:var(--dark2)}
.why-vis-inner{padding:2.5rem}
.code-window{background:var(--black);border-radius:4px;border:0.5px solid rgba(255,255,255,0.06);overflow:hidden}
.code-bar{display:flex;align-items:center;gap:0.5rem;background:var(--dark3);padding:0.7rem 1rem;border-bottom:0.5px solid rgba(255,255,255,0.06)}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-dot.r{background:#ff5f57}.code-dot.y{background:#febc2e}.code-dot.g{background:#28c840}
.code-body{font-family:monospace;font-size:0.8rem;line-height:1.9;color:#8892a4;padding:1.5rem}
.kw{color:#60a5fa}.fn{color:var(--gold2)}.str{color:#f9a8d4}.cm{color:#3d4455}.cl{color:#86efac}
.why-logo-bg{position:absolute;bottom:-20px;right:-20px;width:120px;height:120px;opacity:0.06}
.why-pts{display:flex;flex-direction:column;gap:1px;background:var(--border-gold);border:0.5px solid var(--border-gold);border-radius:4px;overflow:hidden}
.why-pt{background:var(--dark2);padding:1.5rem 1.75rem;display:flex;gap:1.25rem;align-items:flex-start;transition:background 0.2s}
.why-pt:hover{background:var(--dark3)}
.why-n{font-family:var(--font-serif);font-size:1.8rem;font-weight:700;color:var(--gold);opacity:0.35;line-height:1;min-width:2rem}
.why-pt h4{font-size:0.95rem;font-weight:500;margin-bottom:0.35rem;color:var(--white)}
.why-pt p{color:var(--muted);font-size:0.83rem;line-height:1.65;font-weight:300}

#process{background:var(--dark);overflow:hidden}
.process-line{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:4rem;position:relative}
.process-line::before{content:'';position:absolute;top:27px;left:12.5%;right:12.5%;height:0.5px;background:linear-gradient(90deg,var(--gold3),var(--gold2),var(--gold3))}
.pstep{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.5rem;z-index:1}
.pstep-n{width:54px;height:54px;border-radius:50%;background:var(--dark2);border:0.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:1.1rem;font-weight:600;color:var(--gold);margin-bottom:1.5rem;box-shadow:0 0 20px rgba(201,168,76,0.15)}
.pstep h4{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;margin-bottom:0.5rem}
.pstep p{color:var(--muted);font-size:0.82rem;line-height:1.65;font-weight:300}

#tech{background:var(--black)}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.tech-pills{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:2rem}
.pill{display:flex;align-items:center;gap:0.5rem;background:var(--dark2);border:0.5px solid var(--border-dark);border-radius:2px;padding:0.45rem 0.9rem;font-size:0.8rem;font-weight:400;transition:border-color 0.2s,color 0.2s;color:var(--silver)}
.pill:hover{border-color:rgba(201,168,76,0.3);color:var(--gold2)}
.pill-gem{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0.7}
.tech-feature{background:var(--dark2);border:0.5px solid var(--border-gold);border-radius:4px;padding:2rem}
.tf-head{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem}
.tf-icon{width:40px;height:40px;background:rgba(201,168,76,0.08);border:0.5px solid var(--border-gold);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.tf-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:600}
.tf-rows{display:flex;flex-direction:column;gap:0.85rem}
.tf-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:0.85rem;border-bottom:0.5px solid rgba(255,255,255,0.05)}
.tf-row:last-child{border:none;padding-bottom:0}
.tf-lbl{color:var(--muted);font-size:0.82rem;font-weight:300}
.tf-bar-wrap{flex:1;margin:0 1rem;background:rgba(255,255,255,0.06);height:3px;border-radius:0}
.tf-bar{height:100%;background:linear-gradient(90deg,var(--gold3),var(--gold2));border-radius:0}
.tf-pct{color:var(--gold2);font-size:0.78rem;font-weight:500;min-width:2.5rem;text-align:right}

#pricing{background:var(--dark)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3.5rem;background:var(--border-gold);border:0.5px solid var(--border-gold);border-radius:4px;overflow:hidden}
.plan{background:var(--dark2);padding:2.25rem;position:relative}
.plan.featured{background:var(--dark3)}
.plan-crown{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--black);font-size:0.65rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:0.3rem 1rem;white-space:nowrap}
.plan-name{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;font-weight:400}
.plan-price{font-family:var(--font-serif);font-size:3rem;font-weight:700;line-height:1;margin-bottom:0.5rem;letter-spacing:-0.01em}
.plan-price.gold-grad{background:linear-gradient(135deg,var(--gold2),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.plan-price span{font-family:var(--font-sans);font-size:1rem;font-weight:300;color:var(--muted)}
.plan-desc{color:var(--muted);font-size:0.82rem;margin-bottom:1.75rem;line-height:1.65;font-weight:300}
.plan-sep{border:none;border-top:0.5px solid rgba(255,255,255,0.06);margin:1.25rem 0}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:0.7rem}
.plan-feats li{display:flex;align-items:center;gap:0.65rem;font-size:0.85rem;color:#c8cbd4}
.plan-feats li::before{content:'\25C6';color:var(--gold);font-size:0.45rem;min-width:10px}
.plan-feats li.off{color:var(--muted)}.plan-feats li.off::before{content:'\2014';color:var(--muted);font-size:0.75rem}
.plan-btn{display:block;margin-top:2rem;text-align:center;padding:0.8rem;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;text-decoration:none;border-radius:2px;transition:all 0.2s}
.plan-btn.o{border:0.5px solid rgba(201,168,76,0.3);color:var(--gold2)}
.plan-btn.o:hover{border-color:var(--gold);background:rgba(201,168,76,0.06)}
.plan-btn.s{background:linear-gradient(135deg,var(--gold2),var(--gold),var(--gold3));color:var(--black);font-weight:600;box-shadow:0 0 24px rgba(201,168,76,0.25)}
.plan-btn.s:hover{box-shadow:0 0 40px rgba(201,168,76,0.5)}

#testi{background:var(--black)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3.5rem}
.tcard{background:var(--dark2);border:0.5px solid var(--border-dark);border-radius:4px;padding:1.75rem;transition:border-color 0.2s}
.tcard:hover{border-color:var(--border-gold)}
.tcard-stars{color:var(--gold);font-size:0.75rem;letter-spacing:3px;margin-bottom:1rem}
.tcard blockquote{font-family:var(--font-serif);font-style:italic;font-size:0.98rem;color:var(--silver2);line-height:1.75;margin-bottom:1.5rem}
.tcard-author{display:flex;align-items:center;gap:0.75rem}
.tcard-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold3),var(--gold));display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600;color:var(--black);flex-shrink:0}
.tcard-name{font-size:0.875rem;font-weight:500;color:var(--white)}
.tcard-role{font-size:0.75rem;color:var(--muted)}

#cta{background:var(--dark);padding:8rem 5vw;text-align:center;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(201,168,76,0.07) 0%,transparent 70%);pointer-events:none}
.cta-logo{width:80px;height:80px;object-fit:contain;margin:0 auto 2rem;display:block;opacity:0.7}
#cta .sec-title{font-size:clamp(2.5rem,5vw,4rem)}
.sec-tag-center{display:flex;justify-content:center}

footer{background:var(--black);border-top:0.5px solid var(--border-gold);padding:3.5rem 5vw 2rem}
.footer-wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand{display:flex;align-items:center;gap:0.7rem;margin-bottom:1rem;text-decoration:none}
.footer-brand img{width:36px;height:36px;object-fit:contain}
.footer-brand-text{font-family:var(--font-serif);font-size:1.3rem;font-weight:400;color:var(--white)}
.footer-brand-text b{color:var(--gold)}
.footer-about{color:var(--muted);font-size:0.83rem;line-height:1.75;font-weight:300}
.footer-col h5{font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem;font-weight:500}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem}
.footer-col ul a{text-decoration:none;color:#6e727d;font-size:0.83rem;transition:color 0.2s}
.footer-col ul a:hover{color:var(--gold2)}
.footer-bot{display:flex;align-items:center;justify-content:space-between;padding-top:1.5rem;border-top:0.5px solid rgba(201,168,76,0.1);color:var(--muted);font-size:0.75rem}
.footer-bot a{color:var(--gold);text-decoration:none}

.fade-up{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease}
.fade-up.v{opacity:1;transform:none}

@media(max-width:960px){
  .services-grid{grid-template-columns:1fr 1fr}
  .why-wrap{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .process-line{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  .process-line::before{display:none}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .footer-wrap{grid-template-columns:1fr 1fr}
  /* mobile handled above via nav-pill-wrap */
  .tech-grid{grid-template-columns:1fr}
}
@media(max-width:600px){.services-grid{grid-template-columns:1fr}.stats-strip{grid-template-columns:1fr 1fr}}

#contact{background:var(--dark);padding:6rem 5vw}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:0.5rem}
.form-group label{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.form-group input,.form-group textarea,.form-group select{background:var(--dark2);border:0.5px solid var(--border-dark);border-radius:2px;padding:0.75rem 1rem;color:var(--white);font-family:var(--font-sans);font-size:0.875rem;outline:none;transition:border-color 0.2s;width:100%;resize:vertical}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:rgba(201,168,76,0.4)}
.form-group select option{background:var(--dark2)}
.form-group textarea{min-height:130px}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.contact-card{background:var(--dark2);border:0.5px solid var(--border-gold);border-radius:4px;padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:background 0.2s}
.contact-card:hover{background:var(--dark3)}
.contact-icon{width:42px;height:42px;background:rgba(201,168,76,0.08);border:0.5px solid var(--border-gold);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.contact-card h4{font-size:0.85rem;font-weight:500;color:var(--white);margin-bottom:0.3rem}
.contact-card p,.contact-card a{color:var(--muted);font-size:0.83rem;font-weight:300;text-decoration:none;line-height:1.65}
.contact-card a:hover{color:var(--gold2)}
@media(max-width:960px){.contact-wrap{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* ══ POWER SYMBOL — pure CSS, no font/glyph needed ══ */
.zk-pwr{
  display:inline-block;
  position:relative;
  width:0.62em;
  height:0.62em;
  vertical-align:0.04em;
  margin:0 0.01em;
  -webkit-text-fill-color:initial; /* escape parent gradient clip */
}
/* The arc (circle with gap at top) */
.zk-pwr::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:0.1em solid #c9a84c;
  /* cut gap at top-center using clip-path */
  clip-path:polygon(50% 0%,100% 0%,100% 100%,0% 100%,0% 0%,38% 0%,38% 15%,62% 15%,62% 0%);
  background:transparent;
}
/* The vertical line at top */
.zk-pwr::after{
  content:'';
  position:absolute;
  left:50%;
  top:-0.08em;
  transform:translateX(-50%);
  width:0.1em;
  height:0.4em;
  background:#c9a84c;
  border-radius:0.05em;
}




@keyframes navRipple{to{transform:translate(-50%,-50%) scale(3);opacity:0}}



/* ══ PAGE LOAD ANIMATIONS ══ */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(201,168,76,0.2)}50%{box-shadow:0 0 50px rgba(201,168,76,0.5),0 0 80px rgba(201,168,76,0.2)}}
@keyframes floatParticle{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(var(--dx)) rotate(720deg);opacity:0}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes borderGlow{0%,100%{border-color:rgba(201,168,76,0.15)}50%{border-color:rgba(201,168,76,0.5)}}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes blinkCursor{50%{border-color:transparent}}
@keyframes countUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes navEntrance{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes heroLogoEntrance{from{opacity:0;transform:scale(0.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes lineExpand{from{width:0;opacity:0}to{width:36px;opacity:0.5}}
@keyframes cardFlip{0%{transform:perspective(800px) rotateY(10deg);opacity:0}100%{transform:perspective(800px) rotateY(0deg);opacity:1}}
@keyframes progressFill{from{width:0%}to{width:var(--target)}}
@keyframes rippleOut{to{transform:translate(-50%,-50%) scale(3);opacity:0}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dotBounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
@keyframes orbFloat{0%,100%{transform:translateY(0px) rotate(0deg)}33%{transform:translateY(-18px) rotate(3deg)}66%{transform:translateY(10px) rotate(-3deg)}}
@keyframes heroTextGlow{0%,100%{text-shadow:0 0 20px rgba(201,168,76,0)}50%{text-shadow:0 0 40px rgba(201,168,76,0.3)}}

/* ══ NAV ENTRANCE ══ */
#mainNav{animation:navEntrance 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.2s both}

/* ══ HERO LOGO ENTRANCE ══ */
.hero-logo{animation:heroLogoEntrance 1s cubic-bezier(0.34,1.56,0.64,1) 0.4s both, logoPulse 4s ease-in-out 1.5s infinite!important}

/* ══ HERO CONTENT STAGGER ══ */
.hero-eyebrow{animation:fadeInUp 0.8s ease 0.7s both}
.hero-eyebrow::before{animation:lineExpand 0.8s ease 1.2s both}
.hero-eyebrow::after{animation:lineExpand 0.8s ease 1.2s both}
.hero h1{animation:fadeInUp 0.9s ease 0.85s both}
.hero-tagline{animation:fadeInUp 0.8s ease 1s both}
.hero-desc{animation:fadeInUp 0.8s ease 1.15s both}
.hero-btns{animation:fadeInUp 0.8s ease 1.3s both}

/* ══ HERO HEADING GLOW ══ */
.hero h1{animation:fadeInUp 0.9s ease 0.85s both, heroTextGlow 4s ease 2s infinite}

/* ══ SCROLL REVEAL BASE ══ */
.reveal{opacity:0;transform:translateY(50px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1)}
.reveal.reveal-left{transform:translateX(-50px)}
.reveal.reveal-right{transform:translateX(50px)}
.reveal.reveal-scale{transform:scale(0.9);opacity:0}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}
.reveal-delay-5{transition-delay:0.5s}

/* ══ PARTICLES CANVAS ══ */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.4}

/* ══ STAT COUNTERS ══ */
.stat-val{transition:all 0.3s}

/* ══ SERVICE CARD HOVER ══ */
.svc{transition:background 0.3s,transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s}
.svc:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 0 0.5px rgba(201,168,76,0.3)}

/* ══ WHY POINT HOVER ══ */
.why-pt{transition:background 0.2s,transform 0.3s,border-left 0.3s}
.why-pt:hover{transform:translateX(6px)}

/* ══ PROCESS STEP ══ */
.pstep-n{transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s,background 0.3s}
.pstep:hover .pstep-n{transform:scale(1.2) rotate(10deg);box-shadow:0 0 30px rgba(201,168,76,0.5);background:rgba(201,168,76,0.1)}

/* ══ PILL HOVER ══ */
.pill{transition:border-color 0.2s,color 0.2s,transform 0.3s,box-shadow 0.3s}
.pill:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(201,168,76,0.15)}

/* ══ PLAN CARD ══ */
.plan{transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s}
.plan:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,0.5),0 0 0 0.5px rgba(201,168,76,0.4)}

/* ══ TESTIMONIAL CARD ══ */
.tcard{transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s,border-color 0.3s}
.tcard:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 24px 60px rgba(0,0,0,0.5);border-color:rgba(201,168,76,0.4)}

/* ══ CTA SHIMMER ══ */
.btn-gold{background-size:200% auto;animation:shimmer 4s linear 2s infinite}

/* ══ ORB DECORATIONS ══ */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;animation:orbFloat var(--dur,8s) ease-in-out infinite;z-index:0}

/* ══ SECTION TAG ANIMATION ══ */
.sec-tag{animation:none}
.sec-tag.visible-tag{animation:fadeInLeft 0.6s ease both}

/* ══ GOLD DIVIDER ANIMATE ══ */
.gold-divider{opacity:0;transform:scaleX(0.5);transition:opacity 0.8s,transform 0.8s}
.gold-divider.visible{opacity:1;transform:scaleX(1)}

/* ══ PROGRESS BARS ANIMATE ══ */
.tf-bar{width:0!important;transition:width 1.2s cubic-bezier(0.22,1,0.36,1)}
.tf-bar.animated{width:var(--target-width)!important}

/* ══ TECH FEATURE CARD ══ */
.tech-feature{transition:transform 0.4s,box-shadow 0.4s,border-color 0.3s}
.tech-feature:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,0.4);border-color:rgba(201,168,76,0.4)}

/* ══ CONTACT CARD HOVER ══ */
.contact-card{transition:transform 0.3s,background 0.3s,border-color 0.3s}
.contact-card:hover{transform:translateX(6px)}

/* ══ FOOTER LINKS ══ */
footer a{transition:color 0.2s,letter-spacing 0.3s}
footer a:hover{letter-spacing:0.04em}

/* ══ CUSTOM CURSOR DOT ══ */


/* ══ MARQUEE STRIP ══ */
.marquee-wrap{overflow:hidden;padding:1rem 0;border-top:0.5px solid var(--border-gold);border-bottom:0.5px solid var(--border-gold);background:var(--dark2);margin-bottom:0}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marqueeScroll 22s linear infinite}
.marquee-item{display:flex;align-items:center;gap:0.7rem;color:var(--muted);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap}
.marquee-gem{color:var(--gold);font-size:0.4rem}

/* ══ SCROLL INDICATOR ══ */
.scroll-indicator{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;z-index:2;animation:fadeInUp 1s ease 1.8s both}
.scroll-indicator span{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollPulse 2s ease infinite}
@keyframes scrollPulse{0%,100%{opacity:0.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.2)}}

/* ══ LOADING SCREEN ══ */
#page-loader{position:fixed;inset:0;background:var(--black);z-index:9000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;transition:opacity 0.6s ease,visibility 0.6s ease}
#page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{font-family:var(--font-serif);font-size:2.5rem;font-weight:600;letter-spacing:0.08em;color:var(--white)}
.loader-logo span{color:var(--gold)}
.loader-bar-wrap{width:200px;height:1px;background:rgba(255,255,255,0.08);border-radius:1px;overflow:hidden}
.loader-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--gold3),var(--gold2),var(--gold));animation:loaderFill 1.2s cubic-bezier(0.22,1,0.36,1) 0.2s forwards}
@keyframes loaderFill{to{width:100%}}
.loader-dots{display:flex;gap:6px}
.loader-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:dotBounce 1.2s ease infinite}
.loader-dot:nth-child(2){animation-delay:0.2s}
.loader-dot:nth-child(3){animation-delay:0.4s}

/* ══ ZEKLORA BRAND NAME STYLE ══ */
.zk-brand{
  display:inline-flex;align-items:center;gap:0;
  font-family:'Cormorant Garamond',serif;font-weight:700;
  letter-spacing:0.06em;line-height:1;
  background:linear-gradient(135deg,#d4d9e4 0%,#f5f4f0 40%,#b8bec9 70%,#d4d9e4 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.zk-brand .zk-o{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  background:linear-gradient(135deg,#e8c97a 0%,#c9a84c 50%,#a07830 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.zk-tagline{
  display:block;
  font-family:'Outfit',sans-serif;font-size:0.45em;
  font-weight:400;letter-spacing:0.18em;text-transform:uppercase;
  background:linear-gradient(90deg,rgba(201,168,76,0.6) 0%,#c9a84c 30%,#e8c97a 50%,#c9a84c 70%,rgba(201,168,76,0.6) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-top:0.12em;
}
.zk-tagline-line{
  display:inline-block;width:1.5em;height:1px;
  background:linear-gradient(90deg,transparent,#c9a84c);
  vertical-align:middle;margin:0 0.4em;
}
.zk-tagline-line.right{
  background:linear-gradient(90deg,#c9a84c,transparent);
}
/* nav brand override */
.nav-brand.zk-nav{
  font-family:'Cormorant Garamond',serif;font-weight:700;letter-spacing:0.06em;
  background:linear-gradient(135deg,#d4d9e4 0%,#f5f4f0 40%,#b8bec9 70%,#d4d9e4 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  color:unset;
}
.nav-brand.zk-nav .zk-o{
  background:linear-gradient(135deg,#e8c97a 0%,#c9a84c 50%,#a07830 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav-brand.zk-nav span:not(.zk-o){
  background:inherit;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* loader brand */
.loader-logo.zk-loader{
  background:linear-gradient(135deg,#d4d9e4 0%,#f5f4f0 40%,#b8bec9 70%,#d4d9e4 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.loader-logo.zk-loader .zk-o{
  background:linear-gradient(135deg,#e8c97a 0%,#c9a84c 50%,#a07830 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* footer brand */
.footer-brand-text.zk-footer{
  font-family:'Cormorant Garamond',serif;font-weight:700;letter-spacing:0.06em;
  background:linear-gradient(135deg,#d4d9e4 0%,#f5f4f0 40%,#b8bec9 70%,#d4d9e4 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  color:unset;
}
.footer-brand-text.zk-footer .zk-o{
  background:linear-gradient(135deg,#e8c97a 0%,#c9a84c 50%,#a07830 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}