/*
Theme Name: Azvom
Theme URI: https://azvom.com
Author: Azvom
Description: Custom holding-company theme for Azvom — dark, high-contrast, animated, dashboard-rich. Elementor compatible.
Version: 3.2
Text Domain: azvom
*/

:root{
  --bg:#12151B;
  --surface:#1C1F26;
  --surface-2:#252932;
  --line:#363A44;
  --emerald:#1257D6;
  --emerald-dim:#17356E;
  --gold:#C6A06A;
  --ivory:#F7F5F1;
  --muted:#A6A9B0;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg); overflow-x:hidden; max-width:100%; }

body{
  background:var(--bg) !important;
  color:var(--ivory);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x:hidden;
  max-width:100%;
  position:relative;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
svg{ display:block; }

.mono{ font-family:ui-monospace, "SF Mono", Menlo, monospace; }
.display{ font-weight:800; letter-spacing:-0.03em; text-transform:uppercase; line-height:0.95; }
.wrap{ max-width:1320px; margin:0 auto; padding:0 48px; }

.gradient-text{
  background:linear-gradient(90deg, var(--emerald), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== BACKGROUND TEXTURE ===== */
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(245,243,238,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,238,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}
.glow-orb{
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;
}
.glow-1{ width:520px; height:520px; background:radial-gradient(circle, rgba(18,87,214,0.22), transparent 70%); top:-180px; left:-120px; }
.glow-2{ width:460px; height:460px; background:radial-gradient(circle, rgba(232,184,75,0.16), transparent 70%); top:-100px; right:-140px; }

/* ===== TICKER ===== */
.ticker-wrap{
  background:var(--surface-2); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:9px 0; position:relative; z-index:5;
}
.ticker{ display:inline-block; animation:scroll 40s linear infinite; }
.ticker span{ display:inline-flex; align-items:center; gap:8px; padding:0 28px; font-size:13px; color:var(--muted); }
.ticker span b{ color:var(--ivory); font-weight:600; }
.up{ color:var(--emerald) !important; }
@keyframes scroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ===== PROMO BAR — static (no scroll/animation), replaces the ticker ===== */
.promo-bar{
  background:linear-gradient(90deg, var(--emerald-dim), var(--surface-2) 55%, var(--emerald-dim));
  border-bottom:1px solid var(--line);
  text-align:center; padding:12px 20px; font-size:13.5px; color:var(--ivory);
  position:relative; z-index:5;
}
.promo-bar a{ color:var(--gold); font-weight:700; text-decoration:none; }
.promo-bar a:hover{ text-decoration:underline; }
.promo-bar .tag{
  display:inline-block; background:linear-gradient(135deg, var(--emerald), var(--gold));
  color:#12151B; font-weight:800; font-size:11px; padding:4px 11px; border-radius:999px;
  margin-right:10px; letter-spacing:0.03em; vertical-align:middle;
}
@media (max-width:520px){
  .promo-bar{ font-size:12px; padding:10px 14px; }
  .promo-bar .tag{ display:block; margin:0 auto 6px; width:fit-content; }
}

/* ===== NAV ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,10,0.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:20px 48px; max-width:1320px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:-0.02em; }
.logo .mark{
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg, var(--emerald), var(--gold));
  display:flex; align-items:center; justify-content:center; color:#08090A; font-weight:800; font-size:16px;
}
.logo .mark-img{ width:32px; height:32px; border-radius:8px; display:block; object-fit:contain; }
.main-nav ul{ display:flex; gap:36px; font-size:14px; }
.main-nav a{ color:var(--muted); transition:color .2s; }
.main-nav a:hover{ color:var(--ivory); }
.nav-cta{ padding:11px 22px; border-radius:8px; border:none; background:linear-gradient(135deg, var(--emerald), var(--gold)); color:#08090A; font-weight:700; font-size:13px; transition:transform .2s ease; }

/* Header shrinks + gains elevation once the page is scrolled */
.site-header{ transition:padding .25s ease, box-shadow .25s ease, background-color .25s ease; }
.site-header.scrolled{ box-shadow:0 10px 30px -14px rgba(0,0,0,0.55); background:rgba(8,9,10,0.96); }
.site-header.scrolled .nav-wrap{ padding-top:13px; padding-bottom:13px; }
.nav-wrap{ transition:padding .25s ease; }

/* Magnetic buttons — smooth pull-toward-cursor, snaps back on leave */
.btn-primary, .nav-cta{ transition:transform .2s cubic-bezier(.2,.9,.3,1.3); will-change:transform; }

/* Ripple micro-interaction on any .btn click */
.btn{ position:relative; overflow:hidden; }
.btn-ripple{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:rgba(245,243,238,0.55); transform:translate(-50%,-50%) scale(0);
  pointer-events:none; animation:btnRipple .6s ease-out forwards;
}
.btn-primary .btn-ripple{ background:rgba(8,9,10,0.35); }
@keyframes btnRipple{ to{ transform:translate(-50%,-50%) scale(22); opacity:0; } }

/* ===== HERO ===== */
.hero{
  display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center;
  padding:100px 48px 90px; max-width:1400px; margin:0 auto;
  position:relative;
}
.eyebrow{
  font-family:ui-monospace, monospace; font-size:12px; color:var(--gold);
  letter-spacing:0.16em; text-transform:uppercase; margin-bottom:24px;
  display:inline-flex; align-items:center; gap:8px;
  opacity:0; animation:fadeUp .8s ease forwards;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.hero h1{ font-size:clamp(40px, 4.8vw, 66px); margin-bottom:24px; opacity:0; animation:fadeUp .8s ease .1s forwards; }
.hero p{ font-size:17.5px; color:var(--muted); max-width:500px; margin-bottom:34px; line-height:1.65; opacity:0; animation:fadeUp .8s ease .2s forwards; }
.hero-btns{ display:flex; gap:14px; margin-bottom:40px; opacity:0; animation:fadeUp .8s ease .3s forwards; }
.btn{ padding:15px 28px; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid var(--line); display:inline-flex; align-items:center; gap:8px; }
.btn-primary{ background:linear-gradient(135deg, var(--emerald), var(--gold)); border:none; color:#08090A; }
.btn-ghost{ color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--emerald); }
.trust-row{ display:flex; align-items:center; gap:14px; opacity:0; animation:fadeUp .8s ease .4s forwards; }
.trust-row span{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.trust-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.trust-pill{
  display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:6px 12px; font-size:12px; color:var(--ivory);
}
.trust-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--emerald); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* ===== BROWSER-FRAME DASHBOARD MOCKUP ===== */
.browser-frame{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  opacity:0; animation:fadeUp .9s ease .3s forwards;
  position:relative; z-index:1;
}
.browser-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.browser-dot{ width:9px; height:9px; border-radius:50%; }
.browser-dot.r{ background:#E5544B; } .browser-dot.y{ background:#E8B84B; } .browser-dot.g{ background:#00D97E; }
.browser-url{
  margin-left:12px; background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:5px 14px; font-size:11px; color:var(--muted); font-family:ui-monospace, monospace;
}
.dash-body{ padding:20px; display:grid; grid-template-columns:100px 1fr; gap:16px; }
.dash-sidebar{ display:flex; flex-direction:column; gap:6px; }
.dash-sidebar .item{
  padding:9px 10px; border-radius:7px; font-size:11px; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.dash-sidebar .item.active{ background:var(--surface-2); color:var(--ivory); }
.dash-sidebar .item svg{ width:13px; height:13px; flex-shrink:0; }
.dash-main{ display:flex; flex-direction:column; gap:12px; }
.dash-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dash-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px; }
.dash-card .label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.dash-card .val{ font-family:ui-monospace, monospace; font-size:19px; }
.dash-card .delta{ font-size:11px; margin-top:3px; color:var(--emerald); }
.dash-chart-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px; }
.dash-chart-card svg{ width:100%; height:56px; }
.dash-table{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.dash-row{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; }
.dash-row .name{ display:flex; align-items:center; gap:7px; color:var(--ivory); }
.dash-row .dot{ width:6px; height:6px; border-radius:50%; background:var(--emerald); }
.dash-row .status{ font-family:ui-monospace, monospace; color:var(--emerald); font-size:10.5px; }

/* floating badge on top of browser frame */
.float-badge{
  position:absolute; background:var(--surface); border:1px solid var(--emerald);
  border-radius:12px; padding:12px 16px; box-shadow:0 20px 50px -15px rgba(0,0,0,0.7);
  display:flex; align-items:center; gap:10px; z-index:2;
  opacity:0; animation:fadeUp .9s ease .6s forwards;
}
.float-badge svg{ width:20px; height:20px; color:var(--emerald); }
.float-badge .b-label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.float-badge .b-val{ font-family:ui-monospace, monospace; font-size:15px; color:var(--ivory); }
.badge-top-right{ top:-18px; right:-18px; }
.badge-bottom-left{ bottom:-18px; left:-18px; }

/* ===== STATS BAND ===== */
.stats-band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 48px; position:relative; z-index:1; }
.stats-inner{ max-width:1320px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; }
.stat-item{ text-align:center; flex:1; min-width:140px; }
.stat-item b{
  display:block; font-family:ui-monospace, monospace; font-size:34px;
  background:linear-gradient(90deg, var(--emerald), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-item span{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; }

/* ===== SECTIONS ===== */
section{ padding:110px 48px; max-width:1320px; margin:0 auto; position:relative; z-index:1; }
.section-head{ margin-bottom:56px; max-width:640px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ animation:none; opacity:1; }
.section-head h2{ font-size:clamp(32px, 3.6vw, 46px); margin-bottom:16px; }
.section-head p{ color:var(--muted); font-size:16px; line-height:1.6; }

.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }

.reveal-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  opacity:0; transform:translateY(24px);
}
.reveal-card.in-view{ opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease, border-color .3s ease, box-shadow .3s ease; }
.reveal-card:hover{ transform:translateY(-6px); border-color:var(--emerald); box-shadow:0 24px 60px -24px rgba(18,87,214,0.25); }
.card-icon{
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg, var(--emerald), var(--gold));
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.card-icon svg{ width:22px; height:22px; color:#08090A; }
.reveal-card h3{ font-size:19px; margin-bottom:12px; }
.reveal-card p{ font-size:14.5px; color:var(--muted); line-height:1.6; }

/* ===== PRODUCT SHOWCASE (big screenshot section) ===== */
.showcase{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;
}
.showcase-checklist{ display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.check-item{ display:flex; gap:14px; align-items:flex-start; }
.check-icon{
  width:26px; height:26px; border-radius:7px; background:var(--emerald-dim);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.check-icon svg{ width:14px; height:14px; color:var(--emerald); }
.check-item h4{ font-size:15px; margin-bottom:3px; }
.check-item p{ font-size:13.5px; color:var(--muted); line-height:1.5; }

/* =========== SPARKLE FIELD — small twinkling star accents near the
   hero, purely decorative "moving stuff" =========== */
.sparkle-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.sparkle{
  position:absolute; width:22px; height:22px; color:var(--gold);
  opacity:0; animation:sparkleTwinkle 3.4s ease-in-out infinite;
}
.sparkle.s1{ top:14%; right:20%; width:18px; height:18px; animation-delay:0s; }
.sparkle.s2{ top:38%; right:6%; width:26px; height:26px; color:var(--emerald); animation-delay:1.1s; }
.sparkle.s3{ top:65%; right:26%; width:15px; height:15px; animation-delay:2.1s; }
@keyframes sparkleTwinkle{
  0%, 100%{ opacity:0; transform:scale(0.6) rotate(0deg); }
  50%{ opacity:.85; transform:scale(1) rotate(25deg); }
}

/* =========== FLOATING ACTION BUTTON — fixed bottom-right, expands
   to reveal a label on hover, same pattern as a site-wide "quick
   contact" widget. Gentle pulse ring draws the eye without being
   obnoxious. =========== */
.float-cta{
  position:fixed; right:28px; bottom:28px; z-index:250;
  display:flex; align-items:center; gap:0;
}
.float-cta-label{
  background:var(--surface); border:1px solid var(--line); color:var(--ivory);
  font-size:13px; font-weight:600; padding:12px 18px; border-radius:999px;
  white-space:nowrap; margin-right:-30px; opacity:0; transform:translateX(10px);
  transition:opacity .25s ease, transform .25s ease, margin-right .25s ease;
  pointer-events:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,0.5);
}
.float-cta:hover .float-cta-label{
  opacity:1; transform:translateX(0); margin-right:10px; pointer-events:auto;
}
.float-cta-btn{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--emerald), var(--gold)); color:#12151B;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 14px 34px -12px rgba(18,87,214,0.55);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3);
}
.float-cta-btn:hover{ transform:scale(1.08) rotate(-8deg); }
.float-cta-btn svg{ width:22px; height:22px; }
.float-cta-btn::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid var(--emerald); opacity:0; animation:floatPulse 2.6s ease-out infinite;
}
@keyframes floatPulse{
  0%{ transform:scale(0.9); opacity:.55; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media (max-width:900px){
  .float-cta{ right:16px; bottom:16px; }
  .float-cta-btn{ width:50px; height:50px; }
  .float-cta-label{ display:none; }
}

/* =========== TRUST BADGES — large laurel-wreath achievement cards === */
.trust-badges{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.trust-badge{ border:1px solid var(--line); border-radius:20px; overflow:hidden; text-align:center; background:var(--surface); }
.trust-badge .tb-top{ padding:50px 30px 30px; position:relative; }
.trust-badge.emerald .tb-top{ background:radial-gradient(circle at 50% 28%, var(--emerald-dim), var(--surface) 72%); }
.trust-badge.gold .tb-top{ background:radial-gradient(circle at 50% 28%, rgba(198,160,106,0.2), var(--surface) 72%); }
.trust-badge .tb-kicker{ font-style:italic; color:var(--muted); font-size:14px; margin-bottom:16px; }
.trust-badge .tb-icon{ width:96px; height:96px; margin:0 auto; color:var(--emerald); }
.trust-badge.gold .tb-icon{ color:var(--gold); }
.trust-badge h3{ font-size:27px; margin:14px 0 0; }
.trust-badge .tb-bottom{ padding:20px 32px 34px; border-top:1px solid var(--line); }
.trust-badge .tb-bottom p{ color:var(--muted); font-size:14px; line-height:1.6; }

/* =========== VENTURE TABS — interactive tabbed marketplace, mirrors a
   real SaaS product page: click a tab, the whole panel + module strip
   swaps out live. =========== */
.venture-tabs{ display:flex; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:40px; padding-bottom:0; }
.venture-tab{
  padding:16px 22px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font-size:14.5px; font-weight:700; cursor:pointer;
  transition:color .2s ease, border-color .2s ease; margin-bottom:-1px;
  font-family:inherit;
}
.venture-tab:hover{ color:var(--ivory); }
.venture-tab.active{ color:var(--ivory); border-bottom-color:var(--gold); }
.venture-panel{ display:none; }
.venture-panel.active{ display:block; animation:panelFade .4s ease; }
@keyframes panelFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.venture-panel-head{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:30px; align-items:flex-end; }
.venture-panel-head h3{ font-size:26px; margin-bottom:10px; }
.venture-panel-head p{ color:var(--muted); font-size:14.5px; max-width:520px; line-height:1.6; }
.venture-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.venture-tags span{
  font-size:11.5px; padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  color:var(--gold); background:var(--emerald-dim); font-weight:600;
}
.venture-cta-row{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.venture-cta-row .btn{ padding:12px 22px; font-size:13px; }

.module-strip{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:14px; scroll-snap-type:x proximity;
  -ms-overflow-style:none; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.module-strip::-webkit-scrollbar{ height:6px; }
.module-strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.module-card{
  flex:0 0 200px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px; scroll-snap-align:start; transition:border-color .2s ease, transform .2s ease;
}
.module-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.module-card .m-icon{
  width:38px; height:38px; border-radius:9px; background:var(--emerald-dim);
  display:flex; align-items:center; justify-content:center; color:var(--emerald); margin-bottom:14px;
}
.module-card .m-icon svg{ width:18px; height:18px; }
.module-card h5{ font-size:14px; margin-bottom:6px; }
.module-card p{ font-size:12px; color:var(--muted); line-height:1.5; }

/* =========== DENSE CHIP WALL — communicates scale/breadth =========== */
.chip-wall{ display:flex; flex-wrap:wrap; gap:9px; }
.chip-wall .chip{ padding:9px 16px; font-size:12.5px; }
.chip-wall .chip.mini{ padding:8px 14px; font-size:12px; background:var(--bg); }

/* =========== ACHIEVEMENT / TRUST BAND =========== */
.badge-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.badge-card{
  position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:30px 26px; text-align:center;
}
.badge-card::before{
  content:""; position:absolute; top:-40%; right:-30%; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, var(--emerald-dim) 0%, transparent 70%); opacity:.6; pointer-events:none;
}
.badge-card .badge-icon{
  width:54px; height:54px; border-radius:14px; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--emerald), var(--gold));
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
}
.badge-card .badge-icon svg{ width:24px; height:24px; color:#08090A; }
.badge-card .badge-num{ font-size:30px; font-weight:800; margin-bottom:4px; position:relative; z-index:1; }
.badge-card .badge-label{ font-size:12.5px; color:var(--muted); position:relative; z-index:1; }

/* =========== TESTIMONIAL MARQUEE — continuous scroll of quick quotes === */
.testi-marquee{ overflow:hidden; white-space:nowrap; padding:6px 0; }
.testi-track{ display:inline-flex; gap:18px; animation:scroll 55s linear infinite; }
.testi-chip{
  display:inline-flex; flex-direction:column; gap:8px; white-space:normal; width:320px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; flex-shrink:0;
}
.testi-chip .stars{ color:var(--gold); font-size:11px; letter-spacing:2px; }
.testi-chip p{ font-size:13px; color:var(--ivory); line-height:1.5; }
.testi-chip .who{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.testi-marquee:hover .testi-track{ animation-play-state:paused; }

.bar-chart-panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px; }
.bar-chart-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:34px; flex-wrap:wrap; gap:10px; }
.bar-chart-head h4{ font-size:17px; }
.bar-chart-grid{ display:flex; align-items:flex-end; gap:20px; height:220px; border-bottom:1px solid var(--line); position:relative; }
.bar-chart-grid::before, .bar-chart-grid::after{ content:""; position:absolute; left:0; right:0; height:1px; background:var(--line); opacity:.35; }
.bar-chart-grid::before{ top:22%; }
.bar-chart-grid::after{ top:60%; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.bar-value{
  font-size:13px; font-weight:700; color:var(--ivory); margin-bottom:8px;
  opacity:0; transform:translateY(6px); transition:opacity .4s ease .9s, transform .4s ease .9s;
  white-space:nowrap;
}
.bar-col.in-view .bar-value{ opacity:1; transform:translateY(0); }
.bar-track{ width:100%; max-width:56px; height:100%; display:flex; align-items:flex-end; }
.bar-fill{
  width:100%; height:0; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg, var(--gold), var(--emerald));
  transition:height 1.1s cubic-bezier(.16,1,.3,1);
}
.bar-col.in-view .bar-fill{ height:var(--bar-h); }
.bar-fill.alt{ background:linear-gradient(180deg, var(--emerald), var(--emerald-dim)); }
.bar-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:12px; white-space:nowrap; }
.bar-chart-legend{ display:flex; gap:22px; margin-top:22px; flex-wrap:wrap; }
.bar-chart-legend span{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.bar-chart-legend .sw{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* =========== SAVINGS CALCULATOR — interactive tool selector =========== */
.calc-wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
.tool-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.tool-item{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:22px 12px; background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
  cursor:pointer; transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
  text-align:center;
}
.tool-item:hover{ transform:translateY(-3px); border-color:var(--muted); }
.tool-item input{ position:absolute; opacity:0; pointer-events:none; }
.tool-item .tool-icon{
  width:38px; height:38px; border-radius:10px; background:var(--emerald-dim);
  display:flex; align-items:center; justify-content:center; color:var(--emerald); flex-shrink:0;
}
.tool-item .tool-icon svg{ width:19px; height:19px; }
.tool-item .tool-name{ font-size:12.5px; font-weight:600; line-height:1.3; }
.tool-item .tool-cost{ font-size:11px; color:var(--muted); }
.tool-item .tool-check{
  position:absolute; top:10px; right:10px; width:19px; height:19px; border-radius:50%;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:11px; color:transparent; transition:all .2s ease; background:var(--bg);
}
.tool-item.checked{ border-color:var(--gold); background:var(--emerald-dim); }
.tool-item.checked .tool-check{ background:var(--emerald); border-color:var(--emerald); color:#08090A; }

.calc-results{ background:var(--surface); border:1px solid var(--gold); border-radius:18px; padding:32px; position:sticky; top:100px; }
.calc-line{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; font-size:13.5px; color:var(--muted); }
.calc-line b{ color:var(--ivory); font-size:18px; }
.calc-line small{ font-size:11px; }
.calc-line.highlight b{ color:var(--gold-bright); }
.calc-divider{ height:1px; background:var(--line); margin:8px 0; }
.calc-savings{ text-align:center; margin-top:22px; padding-top:22px; border-top:1px dashed var(--line); }
.calc-savings span{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.calc-savings-num{ font-size:42px; font-weight:800; color:var(--emerald); margin:8px 0; transition:transform .2s ease; }
.calc-savings-num.pulse{ animation:calcPulse .45s ease; }
@keyframes calcPulse{ 0%{ transform:scale(1.18); color:var(--gold-bright); } 100%{ transform:scale(1); } }


/* X icon — the "old way" counterpart to check-icon, used in comparison lists */
.x-icon{
  width:26px; height:26px; border-radius:7px; background:rgba(180,60,60,0.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.x-icon svg{ width:13px; height:13px; color:#D46A6A; }

/* Comparison block — "old way" vs "Azvom way", two cards side by side */
.compare-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px; }
.compare-card.negative{ opacity:0.88; }
.compare-card .compare-label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.09em; color:var(--muted);
  margin-bottom:18px; display:block;
}
.compare-card.positive .compare-label{ color:var(--gold); }
.compare-card ul{ display:flex; flex-direction:column; gap:16px; margin-top:6px; }
.compare-card li{ display:flex; gap:14px; align-items:flex-start; font-size:14px; color:var(--ivory); line-height:1.5; }

/* Pull-quote — big statement block, used for founder/leadership quotes */
.quote-block{
  max-width:820px; margin:0 auto; text-align:center; position:relative; padding:0 20px;
}
.quote-block .quote-mark{ font-size:64px; font-family:Georgia, serif; color:var(--gold); opacity:0.5; line-height:1; margin-bottom:10px; }
.quote-block p{ font-size:clamp(20px, 2.6vw, 30px); line-height:1.5; color:var(--ivory); font-weight:500; margin-bottom:26px; }
.quote-block .attribution{ display:flex; align-items:center; justify-content:center; gap:12px; }
.quote-block .attribution h5{ font-size:14px; margin-bottom:1px; }
.quote-block .attribution span{ font-size:12.5px; color:var(--muted); }

/* Chip grid — used for "industries served" / tag-style lists */
.chip-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:12px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; color:var(--ivory); transition:border-color .2s ease, transform .2s ease;
}
.chip:hover{ border-color:var(--gold); transform:translateY(-2px); }
.chip svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }

/* Mini info band — used for availability/response-time strips */
.info-strip{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
}
.info-strip .cell{ background:var(--surface); padding:26px 28px; }
.info-strip .cell .label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:8px; }
.info-strip .cell .val{ font-size:19px; font-weight:700; }


.big-frame{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:0 40px 100px -30px rgba(0,0,0,0.65);
}
.big-frame .browser-bar{ padding:14px 18px; }
.big-dash-body{ padding:26px; }
.big-dash-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.big-dash-top h4{ font-size:15px; }
.pill-tag{ font-size:10px; background:var(--emerald-dim); color:var(--emerald); padding:4px 10px; border-radius:20px; font-family:ui-monospace, monospace; }
.big-dash-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:16px; }
.big-dash-grid .dash-card .val{ font-size:22px; }
.big-chart-wrap{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:20px; }
.big-chart-wrap svg{ width:100%; height:140px; }

/* ===== PROCESS ===== */
.process-list{ display:flex; flex-direction:column; }
.process-row{ display:grid; grid-template-columns:80px 1fr; gap:28px; padding:32px 0; border-bottom:1px solid var(--line); opacity:0; transform:translateX(-16px); }
.process-row.in-view{ opacity:1; transform:translateX(0); transition:opacity .6s ease, transform .6s ease; }
.process-num{ font-family:ui-monospace, monospace; font-size:26px; color:var(--gold); }
.process-row h3{ font-size:19px; margin-bottom:8px; }
.process-row p{ color:var(--muted); font-size:14.5px; max-width:600px; line-height:1.6; }

/* ===== CTA BAND ===== */
.cta-band{
  margin:0 48px 100px; max-width:1224px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(18,87,214,0.12), var(--bg) 70%);
  border:1px solid var(--emerald); border-radius:22px; padding:70px 60px;
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(26px,3vw,38px); max-width:480px; margin-bottom:10px; }
.cta-band p{ color:var(--muted); font-size:15px; }

/* ===== FOOTER ===== */
.site-footer{ border-top:1px solid var(--line); padding:60px 48px 32px; position:relative; z-index:1; }
.footer-grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.footer-grid p{ color:var(--muted); font-size:14px; margin-top:14px; max-width:280px; line-height:1.6; }
.footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color:var(--ivory); }
.footer-col a:hover{ color:var(--emerald); }
.footer-bottom{ max-width:1320px; margin:0 auto; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:13px; flex-wrap:wrap; gap:10px; }

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{ padding:90px 48px 70px; max-width:1000px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(38px, 5vw, 60px); margin-bottom:18px; }
.page-hero p{ color:var(--muted); font-size:17px; max-width:560px; margin:0 auto; line-height:1.6; }

/* ===== IMAGES (duotone treatment so any photo matches brand colors) ===== */
.img-duo{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; }
.img-duo.square{ aspect-ratio:1/1; }
.img-duo.wide{ aspect-ratio:21/9; }
.img-duo img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) brightness(.55) contrast(1.1); }
.img-duo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(18,87,214,.6), rgba(232,184,75,.4));
  mix-blend-mode:color;
}
.avatar-img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--line); flex-shrink:0; }

/* ===== PAGE HERO BANNER (image bg + overlay) ===== */
.page-hero-banner{ position:relative; padding:120px 48px 90px; text-align:center; overflow:hidden; }
.page-hero-banner .banner-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-banner .banner-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.3); }
.page-hero-banner .banner-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,10,.35) 0%, var(--bg) 94%);
}
.page-hero-banner .content{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.page-hero-banner h1{ font-size:clamp(38px, 5vw, 60px); margin-bottom:18px; }
.page-hero-banner p{ color:var(--muted); font-size:17px; max-width:560px; margin:0 auto; line-height:1.6; }

/* ===== TESTIMONIALS ===== */
.testimonial-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px; }
.testimonial-card .stars{ color:var(--gold); font-size:13px; margin-bottom:14px; letter-spacing:2px; }
.testimonial-card .quote{ font-size:14.5px; color:var(--ivory); line-height:1.65; margin-bottom:24px; }
.testimonial-head{ display:flex; align-items:center; gap:12px; }
.testimonial-head h5{ font-size:14px; margin-bottom:2px; }
.testimonial-head span{ font-size:12px; color:var(--muted); }

/* ===== PRICING ===== */
.price-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px; display:flex; flex-direction:column; position:relative; }
.price-card.featured{ border-color:var(--emerald); background:linear-gradient(180deg, rgba(18,87,214,0.07), transparent 45%), var(--surface); }
.price-card.featured::before{
  content:"MOST POPULAR"; position:absolute; top:0; right:22px;
  background:linear-gradient(135deg, var(--emerald), var(--gold)); color:#12151B;
  font-size:10px; font-weight:800; letter-spacing:0.06em; padding:7px 12px;
  border-radius:0 0 8px 8px; z-index:2;
}
.price-card h3{ font-size:14px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:10px; }
.price-num{ font-family:ui-monospace, monospace; font-size:38px; margin-bottom:6px; }
.price-num span{ font-size:14px; color:var(--muted); font-family:-apple-system, sans-serif; }
.price-desc{ font-size:13.5px; color:var(--muted); margin-bottom:26px; }
.price-features{ display:flex; flex-direction:column; gap:13px; margin-bottom:28px; flex:1; }
.price-features li{ font-size:13.5px; display:flex; gap:10px; align-items:flex-start; color:var(--ivory); }

/* ===== PORTFOLIO / CASE STUDIES ===== */
.case-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .3s ease, border-color .3s ease; }
.case-card:hover{ transform:translateY(-6px); border-color:var(--emerald); }
.case-card .art-panel{ border-radius:0; border:none; border-bottom:1px solid var(--line); }
.case-card .body{ padding:28px; }
.case-tag{ font-size:10px; color:var(--emerald); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; display:block; font-family:ui-monospace, monospace; }
.case-card h3{ font-size:18px; margin-bottom:10px; }
.case-card p{ font-size:14px; color:var(--muted); line-height:1.6; }
.case-stats{ display:flex; gap:22px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.case-stats div b{ display:block; font-family:ui-monospace, monospace; color:var(--gold); font-size:19px; }
.case-stats div span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--emerald), var(--gold));
  z-index:300; transition:width .1s linear;
}

/* ===== CURSOR GLOW ===== */
.cursor-glow{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(18,87,214,0.18), transparent 70%);
  pointer-events:none; z-index:0; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s ease; left:0; top:0;
}
.hero:hover .cursor-glow{ opacity:1; }

/* ===== TILT CARDS ===== */
.tilt{ transform-style:preserve-3d; transition:transform .15s ease-out, border-color .3s ease, box-shadow .3s ease; will-change:transform; }

/* ===== IMAGE REVEAL WIPE ===== */
.img-duo{ clip-path:inset(0 0 0 0); }
.img-duo.wipe{ clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.16,1,.3,1); }
.img-duo.wipe.in-view{ clip-path:inset(0 0 0 0); }

/* ===== PARALLAX ===== */
.parallax{ will-change:transform; }

/* ===== SHIMMER (featured pricing) ===== */
.price-card.featured{ position:relative; overflow:hidden; }
.price-card.featured::after{
  content:""; position:absolute; top:0; left:-150%; width:80%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(18,87,214,0.12), transparent);
  animation:shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ left:-150%; }
  50%{ left:150%; }
  100%{ left:150%; }
}

/* ===== MARQUEE STRIP ===== */
.marquee-strip{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; position:relative; z-index:1; }
.marquee-track{ display:inline-block; animation:scroll 26s linear infinite; }
.marquee-item{
  display:inline-flex; align-items:center; gap:10px; padding:0 36px;
  font-size:15px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em;
}
.marquee-item svg{ width:18px; height:18px; color:var(--emerald); }

/* ===== BENTO GALLERY ===== */
.bento-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:140px; gap:16px; }
.bento-grid .img-duo{ height:100%; }
.bento-1{ grid-column:span 2; grid-row:span 2; }
.bento-2{ grid-column:span 2; grid-row:span 1; }
.bento-3{ grid-column:span 1; grid-row:span 1; }
.bento-4{ grid-column:span 1; grid-row:span 1; }
.bento-5{ grid-column:span 2; grid-row:span 1; }

/* ===== SERVICE CARD WITH IMAGE ===== */
.service-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; opacity:0; transform:translateY(24px); }
.service-card.in-view{ opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease, border-color .3s ease, box-shadow .3s ease; }
.service-card:hover{ border-color:var(--emerald); box-shadow:0 24px 60px -24px rgba(18,87,214,0.25); }
.service-card .art-panel{ border-radius:0; border:none; border-bottom:1px solid var(--line); aspect-ratio:16/9; }
.service-card .body{ padding:28px; }
.service-card .card-icon{ margin-top:-58px; margin-bottom:16px; position:relative; z-index:2; box-shadow:0 10px 30px -8px rgba(0,0,0,0.5); }
.service-card h3{ font-size:18px; margin-bottom:10px; }
.service-card p{ font-size:14px; color:var(--muted); line-height:1.6; }

/* ===== ART PANELS (replaces random stock photography — always on-brand, always relevant) ===== */
.art-panel{
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,68,177,0.35), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(176,141,87,0.25), transparent 55%),
    var(--surface-2);
  background-size:200% 200%;
  animation:panelShift 8s ease-in-out infinite;
}
.art-panel.wide{ aspect-ratio:21/9; }
.art-panel.square{ aspect-ratio:1/1; }
.art-panel svg{ width:48%; max-width:180px; position:relative; z-index:1; }
.art-panel::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(245,243,238,0.06) 1px, transparent 1px);
  background-size:22px 22px; opacity:0.5;
}
@keyframes panelShift{
  0%, 100%{ background-position:0% 0%, 100% 100%, 0 0; }
  50%{ background-position:30% 30%, 70% 70%, 0 0; }
}

/* ===== ANIMATED GRADIENT MESH (page hero banners — no photos) ===== */
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:var(--bg);
}
.mesh-bg .blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:0.55;
  animation:blobFloat 14s ease-in-out infinite;
}
.mesh-bg .blob-1{ width:420px; height:420px; background:var(--emerald); top:-140px; left:5%; animation-delay:0s; }
.mesh-bg .blob-2{ width:380px; height:380px; background:var(--gold); top:-80px; right:8%; animation-delay:-5s; }
.mesh-bg .blob-3{ width:300px; height:300px; background:var(--emerald); bottom:-160px; left:40%; animation-delay:-9s; opacity:0.35; }
.mesh-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,10,.2) 0%, var(--bg) 92%);
}
@keyframes blobFloat{
  0%, 100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-20px) scale(1.1); }
  66%{ transform:translate(-20px,25px) scale(0.95); }
}

/* ===== MONOGRAM AVATAR (replaces stock avatar photos) ===== */
.avatar-mono{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--emerald), var(--gold));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:17px;
}

/* ===== FLOATING PARTICLES (hero) ===== */
.particles{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--emerald); opacity:0.6; animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.6; }
  90%{ opacity:0.6; }
  100%{ transform:translateY(-400px) translateX(30px); opacity:0; }
}

/* ===== WORD-STAGGER HEADING ===== */
.stagger-word{ display:inline-block; opacity:0; transform:translateY(24px); animation:wordUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes wordUp{ to{ opacity:1; transform:translateY(0); } }

/* ===== LINE-DRAW CHART ===== */
.line-draw{ stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1); }
.line-draw.in-view{ stroke-dashoffset:0; }

/* ===== PULSE GLOW BUTTON ===== */
.btn-primary{ position:relative; }
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:9px;
  box-shadow:0 0 0 0 rgba(0,68,177,0.5); animation:btnPulse 2.4s ease-out infinite;
}
@keyframes btnPulse{
  0%{ box-shadow:0 0 0 0 rgba(0,68,177,0.45); }
  70%{ box-shadow:0 0 0 14px rgba(0,68,177,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,68,177,0); }
}

/* ===== FAQ ===== */
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 26px; cursor:pointer;
}
.faq-item summary{
  font-size:15.5px; font-weight:600; list-style:none; display:flex;
  justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:20px; color:var(--emerald); font-weight:400; flex-shrink:0; margin-left:14px;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color:var(--muted); font-size:14px; line-height:1.6; margin-top:14px; }

/* ===== CONTACT FORM ===== */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px; display:flex; flex-direction:column; gap:16px; }
.contact-form input, .contact-form textarea{
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  padding:14px 16px; color:var(--ivory); font-size:14px; font-family:inherit; width:100%;
}
.contact-form label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; display:block; }
.contact-form textarea{ resize:vertical; min-height:120px; }
.contact-form select{
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--ivory); font-size:14px; width:100%; font-family:inherit;
}
.radio-row{ display:flex; gap:20px; flex-wrap:wrap; }
.radio-row label{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ivory); text-transform:none; cursor:pointer; margin-bottom:0; }
.radio-row input[type="radio"]{ accent-color:var(--gold); width:16px; height:16px; }

/* ===== FILE UPLOAD (CV / resume) — styled dropzone-style button ===== */
.file-upload{
  border:1.5px dashed var(--line); border-radius:12px; padding:26px 20px; text-align:center;
  cursor:pointer; transition:border-color .2s ease, background-color .2s ease; display:block;
}
.file-upload:hover{ border-color:var(--gold); background:var(--surface-2); }
.file-upload input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.file-upload .fu-icon{ width:30px; height:30px; margin:0 auto 10px; color:var(--gold); }
.file-upload .fu-text{ font-size:13.5px; color:var(--ivory); font-weight:600; }
.file-upload .fu-sub{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.file-upload.has-file{ border-color:var(--emerald); border-style:solid; }
.file-upload.has-file .fu-text{ color:var(--emerald); }

/* ===== JOB LISTING CARD ===== */
.job-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px 36px; }
.job-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.job-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.job-tags span{
  font-size:11.5px; padding:6px 13px; border-radius:999px; border:1px solid var(--line);
  color:var(--muted); background:var(--surface-2);
}
.job-card h4{ font-size:15px; margin:26px 0 12px; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; }
.job-card ul{ display:flex; flex-direction:column; gap:10px; }
.job-card ul li{ font-size:14px; color:var(--ivory); line-height:1.55; padding-left:20px; position:relative; }
.job-card ul li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
.contact-info-item{ display:flex; gap:16px; margin-bottom:28px; }
.contact-info-item .card-icon{ flex-shrink:0; margin-bottom:0; }
.contact-info-item h4{ font-size:15px; margin-bottom:4px; }
.contact-info-item span{ color:var(--muted); font-size:14px; }

/* ===== MOBILE NAV DRAWER ===== */
.mobile-menu-btn{
  display:none; background:none; border:1px solid var(--line); border-radius:8px;
  width:40px; height:40px; align-items:center; justify-content:center;
  color:var(--ivory); cursor:pointer; padding:0;
}
.mobile-menu-btn svg{ width:20px; height:20px; }

.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.65);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:150;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }

.nav-drawer{
  position:fixed; top:0; right:0; height:100vh; width:300px; max-width:84vw;
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:200; padding:28px 26px; display:flex; flex-direction:column; gap:2px;
  overflow-y:auto;
}
.nav-drawer.open{ transform:translateX(0); }
/* If wp_nav_menu() outputs a <ul><li> structure instead of raw <a> tags,
   force it into the same block-per-row layout so every link gets its own
   full-height, full-width tap target instead of collapsing to inline
   text height (which was letting adjacent links visually overlap and
   made them hard to press individually). */
.nav-drawer ul{ display:flex; flex-direction:column; gap:2px; list-style:none; width:100%; }
.nav-drawer li{ list-style:none; width:100%; }
.nav-drawer a{
  display:block; width:100%; padding:18px 10px; font-size:16px; color:var(--ivory);
  border-bottom:1px solid var(--line); line-height:1.3;
}
.nav-drawer a:hover, .nav-drawer a:active{ color:var(--emerald); }
.drawer-close{
  align-self:flex-end; background:none; border:none; color:var(--muted);
  font-size:30px; line-height:1; cursor:pointer; margin-bottom:12px; padding:4px 8px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .nav-wrap{ padding:16px 20px; }
  .main-nav{ display:none; }
  .nav-cta{ display:none; }
  .mobile-menu-btn{ display:flex; }
  .hero{ grid-template-columns:1fr; padding:56px 20px 50px; gap:44px; }
  section{ padding:60px 20px; }
  .grid-3, .grid-2, .contact-wrap, .showcase{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-band{ margin:0 20px 60px; padding:38px 26px; flex-direction:column; align-items:flex-start; }
  .stats-inner{ justify-content:flex-start; gap:26px 40px; }
  .stat-item{ min-width:120px; flex:none; width:40%; }
  .float-badge{ display:none; }
  .big-dash-grid{ grid-template-columns:1fr; }
  .dash-body{ grid-template-columns:1fr; }
  .dash-sidebar{ display:none; }
  .ticker span{ font-size:12px; padding:0 18px; }
  .page-hero{ padding:60px 20px 50px; }
  .timeline-row{ grid-template-columns:1fr !important; gap:10px !important; }
  .faq-item{ padding:18px !important; }
  .page-hero-banner{ padding:80px 20px 60px; }
  .testimonial-card, .price-card{ padding:26px; }
  .bento-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:110px; }
  .bento-1{ grid-column:span 2; grid-row:span 2; }
  .bento-2, .bento-5{ grid-column:span 2; }
  .cursor-glow{ display:none; }
  .tilt{ transform:none !important; }
  .info-strip{ grid-template-columns:1fr; }
  .calc-wrap{ grid-template-columns:1fr; }
  .calc-results{ position:static; }
  .tool-grid{ grid-template-columns:repeat(2, 1fr); }
  .bar-chart-grid{ gap:10px; height:170px; }
  .bar-value{ font-size:11px; }
  .bar-label{ font-size:9.5px; }
  .badge-row{ grid-template-columns:1fr 1fr; }
  .venture-panel-head{ flex-direction:column; align-items:flex-start; }
  .venture-tabs{ gap:4px; }
  .venture-tab{ padding:12px 14px; font-size:13px; }
  .testi-chip{ width:260px; }
  .trust-badges{ grid-template-columns:1fr; }
}

@media (max-width:520px){
  .hero h1{ font-size:34px; }
  .browser-frame{ display:none; }
  .stat-item{ width:100%; text-align:left; }
  .stats-inner{ flex-direction:column; gap:22px; }

  /* Keep decorative blurred orbs/blobs inside the viewport so pinch-zoom
     doesn't reveal extra blank canvas beyond the visible content. */
  .glow-1{ width:260px; height:260px; left:-70px; top:-90px; }
  .glow-2{ width:220px; height:220px; right:-80px; top:-60px; }
  .mesh-bg .blob-1{ width:220px; height:220px; left:-10%; }
  .mesh-bg .blob-2{ width:200px; height:200px; right:-5%; }
  .mesh-bg .blob-3{ width:180px; height:180px; left:20%; }
}

/* ===== ACCESSIBILITY: honor reduced-motion at the CSS layer too,
   as a backstop for the JS-level checks in main.js ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .ticker{ animation:none !important; }
  .eyebrow, .hero h1, .hero p, .hero-btns, .trust-row, .browser-frame{ opacity:1 !important; }
}