/* ================================================================
   NEXORA SOLUTIONS — COMPLETE DESIGN SYSTEM v3
   Brand: Orange #F97316 / #EA580C  +  Purple #7C3AED / #5B21B6
   Base: #030712  Cards: #0B1120 / #111827
   Fonts: Syne 700/800 (display)  +  Inter 300-900 (body)
   ================================================================ */

/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  /* Core brand */
  --orange:        #F97316;
  --orange-deep:   #EA580C;
  --orange-light:  #FB923C;
  --orange-pale:   rgba(249,115,22,.12);

  --purple:        #7C3AED;
  --purple-deep:   #5B21B6;
  --purple-light:  #A78BFA;
  --purple-pale:   rgba(124,58,237,.12);

  /* Backgrounds */
  --bg:            #030712;
  --bg-card:       #0B1120;
  --bg-card2:      #111827;
  --bg-card3:      #1C2B3A;

  /* Borders */
  --border:        rgba(255,255,255,0.07);
  --border-o:      rgba(249,115,22,0.38);
  --border-p:      rgba(124,58,237,0.38);

  /* Text */
  --t1:  #F1F5F9;
  --t2:  #94A3B8;
  --t3:  #475569;
  --t4:  #334155;

  /* Layout */
  --nav-h:  72px;
  --r:      14px;
  --r-sm:    8px;
  --r-xs:    6px;
  --max-w:  1200px;
}

/* ── 2. RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background:var(--bg); color:var(--t1);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; display:block }
a  { text-decoration:none; color:inherit }
button { cursor:pointer; border:none; background:none; font-family:inherit }
input,select,textarea { font-family:inherit; font-size:inherit }
ul,ol { list-style:none }

/* ── 3. TYPOGRAPHY ────────────────────────────────────────────── */
.font-syne  { font-family:'Syne',sans-serif }

/* Animated gradient headline */
.gradient-text {
  background: linear-gradient(135deg, var(--orange) 0%, var(--purple-light) 50%, var(--orange) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grad 5s linear infinite;
}
@keyframes grad { to { background-position: 220% center } }

/* Section eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px;
}
.eyebrow::before,.eyebrow::after {
  content:''; width:22px; height:1px;
  background:var(--orange); opacity:.55;
}

/* Section headings */
.sec-title {
  font-family:'Syne',sans-serif;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  font-weight: 800; color: white;
  letter-spacing: -.035em; line-height: 1.12;
  margin-bottom: 16px;
}
.sec-sub {
  font-size: 1.0625rem; color: var(--t2);
  line-height: 1.75; max-width: 560px;
}

/* ── 4. LAYOUT ────────────────────────────────────────────────── */
.nx-c { max-width:var(--max-w); margin:0 auto; padding:0 24px }
.section    { padding: 96px 0 }
.section-sm { padding: 60px 0 }

/* Responsive grids */
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.g5 { display:grid; grid-template-columns:repeat(5,1fr); gap:18px }

@media(max-width:1100px) {
  .g4 { grid-template-columns:repeat(2,1fr) }
  .g5 { grid-template-columns:repeat(3,1fr) }
}
@media(max-width:768px) {
  .section { padding:64px 0 }
  .section-sm { padding:44px 0 }
  .g2,.g3 { grid-template-columns:1fr }
  .nx-c { padding:0 18px }
}
@media(max-width:600px) {
  .g4,.g5 { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:380px) {
  .g4,.g5 { grid-template-columns:1fr }
}

/* ── 5. NAVBAR ────────────────────────────────────────────────── */
#navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--nav-h); transition: background .3s, border-color .3s;
}
.nav-inner { height:100% }
#navbar.scrolled .nav-inner {
  background: rgba(3,7,18,.94);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav-flex {
  display: flex; align-items:center;
  justify-content:space-between; height:var(--nav-h);
}

/* Logo */
.logo-wrap { display:flex; align-items:center; gap:10px; transition:opacity .2s }
.logo-wrap:hover { opacity:.85 }
.logo-img   { height:40px; width:auto }
.logo-text  { display:flex; flex-direction:column; line-height:1 }
.logo-name  {
  font-family:'Syne',sans-serif; font-size:17px;
  font-weight:800; color:white; letter-spacing:-.01em;
}
.logo-sub {
  font-size:9.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--orange); margin-top:3px;
}

/* Desktop links */
.desktop-nav { display:flex; align-items:center; gap:1px }
.nav-link {
  padding: 7px 13px; font-size:13.5px; font-weight:500;
  color: var(--t2); border-radius:var(--r-xs);
  transition: color .18s, background .18s;
}
.nav-link:hover { color:white; background:rgba(255,255,255,.06) }
.nav-link.active { color:var(--orange) }

/* CTA button in nav */
.btn-nav-cta {
  padding: 9px 20px; font-size:13px; font-weight:600;
  background: linear-gradient(135deg, var(--orange-deep), var(--orange));
  color:white; border-radius:var(--r-xs);
  transition: transform .18s, box-shadow .18s;
  white-space:nowrap;
}
.btn-nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(249,115,22,.35) }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:6px }
.hamburger span {
  display:block; width:20px; height:2px;
  background:white; border-radius:2px;
  transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

@media(max-width:1024px) {
  .desktop-nav { display:none }
  .hamburger { display:flex }
}

/* Mobile menu */
.mobile-menu {
  background: rgba(3,7,18,.97);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
}
.mobile-menu.hidden { display:none }
.mob-inner { display:flex; flex-direction:column; gap:3px; padding:14px 0 20px }
.mob-link {
  display:block; padding:12px 8px; font-size:15px;
  font-weight:500; color:var(--t2); border-radius:var(--r-sm);
  transition: color .18s, background .18s;
}
.mob-link:hover { color:white; background:rgba(255,255,255,.06) }
.mob-cta { margin-top:14px; text-align:center; border-radius:var(--r-sm) }

/* ── 6. BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items:center; gap:8px;
  padding: 12px 28px; font-size:14px; font-weight:600;
  background: linear-gradient(135deg, var(--orange-deep), var(--orange));
  color:white; border-radius:var(--r-sm);
  transition: transform .18s, box-shadow .18s;
  border:none; cursor:pointer;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow: 0 12px 32px rgba(249,115,22,.38);
}

.btn-secondary {
  display: inline-flex; align-items:center; gap:8px;
  padding: 12px 28px; font-size:14px; font-weight:600;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  color:white; border-radius:var(--r-sm);
  transition: transform .18s, box-shadow .18s;
  border:none; cursor:pointer;
}
.btn-secondary:hover {
  transform:translateY(-2px);
  box-shadow: 0 12px 32px rgba(124,58,237,.38);
}

.btn-ghost {
  display: inline-flex; align-items:center; gap:8px;
  padding: 12px 28px; font-size:14px; font-weight:500;
  background: transparent; color:var(--t2);
  border-radius:var(--r-sm); border:1px solid var(--border);
  transition: border-color .18s, color .18s, background .18s;
  cursor:pointer;
}
.btn-ghost:hover { border-color:rgba(255,255,255,.28); color:white }

.btn-outline-o {
  display: inline-flex; align-items:center; gap:6px;
  padding: 10px 22px; font-size:13px; font-weight:600;
  border: 1.5px solid var(--orange); color:var(--orange);
  border-radius:var(--r-sm);
  transition: background .18s, color .18s;
  cursor:pointer;
}
.btn-outline-o:hover { background:var(--orange); color:white }

.btn-sm { padding:8px 18px !important; font-size:12.5px !important }
.btn-lg { padding:16px 40px !important; font-size:16px !important }
.btn-full { width:100%; justify-content:center; display:flex }

/* ── 7. CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r); padding:32px;
  transition: border-color .28s, transform .28s, box-shadow .28s;
}
.card-o:hover {
  border-color: var(--border-o); transform:translateY(-5px);
  box-shadow: 0 24px 60px rgba(249,115,22,.09);
}
.card-p:hover {
  border-color: var(--border-p); transform:translateY(-5px);
  box-shadow: 0 24px 60px rgba(124,58,237,.09);
}
.card-hover:hover { transform:translateY(-4px) }

/* Partner cards with accent top-bar */
.pcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px; padding:40px;
  position:relative; overflow:hidden;
  transition: border-color .28s, transform .28s, box-shadow .28s;
}
.pcard::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; border-radius:20px 20px 0 0;
}
.pcard-o::before { background:linear-gradient(90deg, var(--orange-deep), var(--orange)) }
.pcard-p::before { background:linear-gradient(90deg, var(--purple-deep), var(--purple)) }
.pcard-o:hover { border-color:var(--border-o); transform:translateY(-6px); box-shadow:0 28px 70px rgba(249,115,22,.1) }
.pcard-p:hover { border-color:var(--border-p); transform:translateY(-6px); box-shadow:0 28px 70px rgba(124,58,237,.1) }

/* Product card */
.prodcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r); padding:26px;
  display:flex; flex-direction:column;
  transition: border-color .28s, transform .28s, box-shadow .28s;
}
.prodcard-o:hover { border-color:var(--border-o); transform:translateY(-4px); box-shadow:0 20px 48px rgba(249,115,22,.08) }
.prodcard-p:hover { border-color:var(--border-p); transform:translateY(-4px); box-shadow:0 20px 48px rgba(124,58,237,.08) }

/* ── 8. BADGES / PILLS ────────────────────────────────────────── */
.badge {
  display:inline-block; padding:4px 12px;
  font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; border-radius:20px;
}
.badge-o     { background:rgba(249,115,22,.14); color:var(--orange-light) }
.badge-p     { background:rgba(124,58,237,.14); color:var(--purple-light) }
.badge-g     { background:rgba(255,255,255,.07); color:var(--t3) }
.badge-green { background:rgba(34,197,94,.13);  color:#4ade80 }
.badge-amber { background:rgba(234,179,8,.13);  color:#fde047 }

.pill {
  display:inline-block; padding:4px 10px;
  font-size:11px; font-weight:600;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border); border-radius:4px;
  color:var(--t3);
  transition:color .18s, border-color .18s;
}
.pill:hover { color:var(--orange); border-color:rgba(249,115,22,.28) }

/* ── 9. ICON BOXES ────────────────────────────────────────────── */
.ibox {
  width:54px; height:54px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-bottom:20px;
}
.ibox-o { background:rgba(249,115,22,.14); color:var(--orange) }
.ibox-p { background:rgba(124,58,237,.14); color:var(--purple-light) }
.ibox-sm { width:40px; height:40px; border-radius:9px; margin-bottom:0 }
.ibox-lg { width:64px; height:64px; border-radius:14px }

/* ── 10. AVATARS ──────────────────────────────────────────────── */
.av {
  border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:white;
  background:linear-gradient(135deg, var(--orange-deep), var(--purple));
}
.av-sm { width:36px; height:36px; font-size:12px }
.av-md { width:46px; height:46px; font-size:14px }
.av-lg { width:66px; height:66px; font-size:20px }
.av-xl { width:80px; height:80px; font-size:24px }

/* ── 11. STAT BLOCK ───────────────────────────────────────────── */
.stat-n {
  font-family:'Syne',sans-serif;
  font-size: clamp(2.3rem,5vw,3.3rem);
  font-weight:800; line-height:1;
  background:linear-gradient(135deg, var(--orange), var(--purple-light));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat-l {
  font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--t3); margin-top:6px;
}

/* Commission number */
.comm-n {
  font-family:'Syne',sans-serif; font-size:2.6rem;
  font-weight:800; line-height:1;
}
.comm-n-o { background:linear-gradient(135deg,var(--orange),var(--orange-light)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.comm-n-p { background:linear-gradient(135deg,var(--purple),var(--purple-light)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }

/* Commission bar */
.comm-bar { height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:7px }
.comm-fill { height:100%; border-radius:4px; width:0; transition:width 1.1s cubic-bezier(.4,0,.2,1) }
.comm-fill-o { background:linear-gradient(90deg, var(--orange-deep), var(--orange)) }
.comm-fill-p { background:linear-gradient(90deg, var(--purple-deep), var(--purple)) }

/* ── 12. HERO ─────────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding-top:var(--nav-h);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
}
.hero-glow {
  position:absolute; top:10%; left:50%; transform:translateX(-50%);
  width:750px; height:750px; border-radius:50%;
  background:radial-gradient(circle,
    rgba(124,58,237,.14) 0%,
    rgba(249,115,22,.07) 45%,
    transparent 70%);
  filter:blur(40px); pointer-events:none;
}
.hero-accent {
  position:absolute; pointer-events:none;
}
.hero-accent-tl {
  top:-100px; left:-100px; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(249,115,22,.06), transparent 70%);
  filter:blur(60px);
}
.hero-accent-br {
  bottom:-80px; right:-80px; width:350px; height:350px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.08), transparent 70%);
  filter:blur(50px);
}

/* Inner-page hero */
.page-hero {
  padding: calc(var(--nav-h) + 64px) 0 72px;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(124,58,237,.05) 0%, transparent 65%);
}
.page-hero::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--orange), var(--purple-light), transparent);
  opacity:.6;
}

/* ── 13. STARS ────────────────────────────────────────────────── */
.stars { display:flex; gap:2px }
.star  { color:var(--orange); font-size:14px }

/* ── 14. TIMELINE ─────────────────────────────────────────────── */
.timeline { position:relative; padding-left:36px }
.timeline::before {
  content:''; position:absolute; left:12px; top:4px; bottom:0;
  width:2px; background:linear-gradient(180deg, var(--orange), var(--purple), transparent);
}
.tl-item { position:relative; padding-bottom:32px }
.tl-item:last-child { padding-bottom:0 }
.tl-dot {
  position:absolute; left:-36px; top:4px;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange-deep), var(--purple));
  border:3px solid var(--bg);
}
.tl-year  { font-family:'Syne',sans-serif; font-size:13px; font-weight:800; color:var(--orange); margin-bottom:4px }
.tl-event { font-size:14px; color:var(--t2); line-height:1.65 }

/* ── 15. PROCESS STEPS ────────────────────────────────────────── */
.step { display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border) }
.step:last-child { border-bottom:none }
.step-num {
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange-deep), var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:13px; font-weight:800; color:white;
}
.step-title { font-size:15px; font-weight:700; color:white; margin-bottom:3px }
.step-desc  { font-size:13.5px; color:var(--t3); line-height:1.65 }

/* ── 16. WHY-US GRID ──────────────────────────────────────────── */
.why-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:16px; background:rgba(255,255,255,.025);
  border:1px solid var(--border); border-radius:10px;
  transition:border-color .2s;
}
.why-item:hover { border-color:rgba(249,115,22,.25) }
.why-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--orange); flex-shrink:0; margin-top:5px;
}
.why-label { font-size:14px; font-weight:700; color:white; margin-bottom:2px }
.why-desc  { font-size:12.5px; color:var(--t3); line-height:1.6 }

/* ── 17. VALUE CARDS ──────────────────────────────────────────── */
.vcard {
  padding:28px; background:rgba(255,255,255,.024);
  border:1px solid var(--border); border-radius:var(--r);
  transition:border-color .25s, transform .25s;
}
.vcard:hover { border-color:rgba(249,115,22,.3); transform:translateY(-3px) }

/* ── 18. CONTRIBUTION GRID ────────────────────────────────────── */
.contrib {
  padding:13px 15px; background:rgba(255,255,255,.024);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:13px; font-weight:600; color:var(--t2);
  display:flex; align-items:center; gap:9px;
  transition:border-color .2s, color .2s;
}
.contrib:hover { border-color:rgba(249,115,22,.3); color:white }
.contrib svg { flex-shrink:0; opacity:.7 }

/* ── 19. FAQ ACCORDION ────────────────────────────────────────── */
.faq-item { border-bottom:1px solid var(--border) }
.faq-q {
  width:100%; text-align:left; padding:20px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:15px; font-weight:600; color:white;
  background:none; border:none; cursor:pointer;
  transition:color .2s;
}
.faq-q:hover { color:var(--orange) }
.faq-icon { font-size:20px; color:var(--orange); transition:transform .3s; flex-shrink:0; line-height:1 }
.faq-ans  { max-height:0; overflow:hidden; transition:max-height .42s ease }
.faq-ans-inner { padding-bottom:20px; font-size:14px; color:var(--t2); line-height:1.78 }
.faq-item.open .faq-icon { transform:rotate(45deg) }

/* ── 20. FORMS ────────────────────────────────────────────────── */
.f-group { margin-bottom:18px }
.f-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media(max-width:580px) { .f-row { grid-template-columns:1fr } }

.f-label {
  display:block; font-size:13px; font-weight:600;
  color:var(--t2); margin-bottom:7px; letter-spacing:.01em;
}
.f-input, .f-select, .f-textarea {
  width:100%; padding:12px 16px;
  background:var(--bg-card2); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--t1);
  font-size:14px; outline:none;
  transition:border-color .2s, box-shadow .2s;
  appearance:none;
}
.f-input::placeholder, .f-textarea::placeholder { color:var(--t4) }
.f-input:focus, .f-select:focus, .f-textarea:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.f-textarea { resize:vertical; min-height:130px }

/* Alias names used in Blade files */
.form-input    { width:100%; padding:12px 16px; background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t1); font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s; appearance:none }
.form-select   { width:100%; padding:12px 16px; background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t1); font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s; appearance:none }
.form-textarea { width:100%; padding:12px 16px; background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t1); font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s; resize:vertical; min-height:130px }
.form-label    { display:block; font-size:13px; font-weight:600; color:var(--t2); margin-bottom:7px }
.form-group    { margin-bottom:18px }
.form-row      { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-input::placeholder,.form-textarea::placeholder { color:var(--t4) }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,.12) }
@media(max-width:580px) { .form-row { grid-template-columns:1fr } }

/* ── 21. ALERTS ───────────────────────────────────────────────── */
.alert { padding:15px 20px; border-radius:var(--r-sm); font-size:14px; margin-bottom:20px }
.alert-ok  { background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.25);  color:#4ade80 }
.alert-err { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.25);  color:#f87171 }
.alert-info{ background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);  color:var(--orange-light) }

/* ── 22. FOOTER ───────────────────────────────────────────────── */
.footer { background:var(--bg); border-top:1px solid var(--border); padding:80px 0 0 }

.footer-grid {
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap:48px; margin-bottom:56px;
}
@media(max-width:1100px) { .footer-grid { grid-template-columns:1fr 1fr; gap:36px } }
@media(max-width:600px)  { .footer-grid { grid-template-columns:1fr } }

.footer-tagline { font-family:'Syne',sans-serif; font-size:13.5px; font-weight:700; color:var(--orange); margin-bottom:10px; letter-spacing:.02em }
.footer-desc    { font-size:13px; color:var(--t3); line-height:1.75; margin-bottom:20px; max-width:280px }
.footer-heading { font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:white; margin-bottom:18px }
.footer-list    { display:flex; flex-direction:column; gap:10px }
.footer-link    { font-size:13.5px; color:var(--t3); transition:color .18s, padding-left .18s }
.footer-link:hover { color:white; padding-left:4px }
.footer-contact { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--t3) }

.footer-bottom {
  border-top:1px solid var(--border); padding:24px 0;
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-copy        { font-size:12.5px; color:var(--t4) }
.footer-legal       { display:flex; gap:20px }
.footer-legal-link  { font-size:12px; color:var(--t4); transition:color .18s }
.footer-legal-link:hover { color:var(--t2) }

/* Social icons */
.social-row { display:flex; gap:10px }
.social-btn {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); transition:background .18s, color .18s, border-color .18s;
}
.social-btn svg { width:14px; height:14px }
.social-btn:hover { background:var(--orange); border-color:var(--orange); color:white }

/* ── 23. PRELOADER ────────────────────────────────────────────── */
#preloader {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:999; transition:opacity .55s, visibility .55s;
}
#preloader.done { opacity:0; visibility:hidden }
.loader {
  width:48px; height:48px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--orange);
  animation:spin .75s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ── 24. BACK TO TOP ──────────────────────────────────────────── */
#back-to-top {
  position:fixed; bottom:28px; right:28px; z-index:50;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange-deep), var(--purple));
  color:white; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transform:translateY(10px);
  transition:opacity .3s, transform .3s;
  box-shadow:0 4px 20px rgba(249,115,22,.3);
  border:none; cursor:pointer;
}
#back-to-top.visible { opacity:1; pointer-events:auto; transform:none }
#back-to-top:hover   { transform:translateY(-3px) !important }

/* ── 25. SCROLL REVEAL ────────────────────────────────────────── */
.reveal       { opacity:0; transform:translateY(22px); transition:opacity .62s ease, transform .62s ease }
.reveal-l     { opacity:0; transform:translateX(-22px); transition:opacity .62s ease, transform .62s ease }
.reveal-r     { opacity:0; transform:translateX(22px);  transition:opacity .62s ease, transform .62s ease }
.reveal-scale { opacity:0; transform:scale(.96);        transition:opacity .62s ease, transform .62s ease }
.reveal.v, .reveal-l.v, .reveal-r.v, .reveal-scale.v,
.reveal.visible, .reveal-l.visible, .reveal-r.visible, .reveal-scale.visible { opacity:1; transform:none }

/* ── 26. STICKY SIDEBAR ───────────────────────────────────────── */
.sticky-top { position:sticky; top:calc(var(--nav-h) + 20px) }

/* ── 27. DIVIDER ──────────────────────────────────────────────── */
.divider { border:none; height:1px; background:var(--border); margin:48px 0 }

/* ── 28. QUOTE BLOCK ──────────────────────────────────────────── */
.quote-block {
  border-left:3px solid var(--orange);
  padding-left:20px; margin:24px 0;
  font-size:1.0625rem; color:var(--t1);
  line-height:1.8; font-style:italic;
}

/* ── 29. SECTION STRIPE BACKGROUNDS ──────────────────────────── */
.bg-stripe-o { background:rgba(249,115,22,.03); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.bg-stripe-p { background:rgba(124,58,237,.03); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.bg-subtle   { background:rgba(255,255,255,.012) }

/* ── 30. PARTNER-STRIP (3-col) ────────────────────────────────── */
.pstrip {
  display:grid; grid-template-columns:repeat(3,1fr);
  text-align:center;
}
.pstrip-col {
  padding:36px 28px;
  border-right:1px solid var(--border);
}
.pstrip-col:last-child { border-right:none }
@media(max-width:768px) {
  .pstrip { grid-template-columns:1fr }
  .pstrip-col { border-right:none; border-bottom:1px solid var(--border) }
  .pstrip-col:last-child { border-bottom:none }
}

/* ── 31. TESTIMONIAL CARDS ────────────────────────────────────── */
.tcard {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:32px;
  position:relative; overflow:hidden;
  transition:border-color .28s, transform .28s;
}
.tcard::before {
  content:'"'; position:absolute; top:18px; right:24px;
  font-size:80px; font-family:'Syne',sans-serif; font-weight:800;
  color:var(--orange); opacity:.12; line-height:1;
}
.tcard-o:hover { border-color:var(--border-o); transform:translateY(-4px) }
.tcard-p:hover { border-color:var(--border-p); transform:translateY(-4px) }

/* ── 32. FILTER BUTTONS ACTIVE ────────────────────────────────── */
.filter-active {
  background:linear-gradient(135deg,var(--orange-deep),var(--orange)) !important;
  color:white !important; border-color:transparent !important;
}

/* ── 33. FEATURE CHECK LIST ───────────────────────────────────── */
.feat-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px;
  background:rgba(255,255,255,.024); border:1px solid var(--border);
  border-radius:var(--r-sm);
  transition:border-color .2s;
}
.feat-row:hover { border-color:rgba(249,115,22,.25) }
.feat-check { color:var(--orange); flex-shrink:0; margin-top:2px }
.feat-check-p { color:var(--purple-light); flex-shrink:0; margin-top:2px }
.feat-text  { font-size:14px; color:var(--t2); line-height:1.6 }

/* ── 34. RESULT BADGES (Portfolio) ───────────────────────────── */
.result-badge {
  font-size:11px; font-weight:700; padding:4px 10px;
  border-radius:20px; line-height:1.4;
}

/* ── 35. MISC UTILITY ─────────────────────────────────────────── */
.text-center  { text-align:center }
.text-o { color:var(--orange) }
.text-p { color:var(--purple-light) }
.flex    { display:flex }
.flex-col{ flex-direction:column }
.wrap    { flex-wrap:wrap }
.items-c { align-items:center }
.items-s { align-items:flex-start }
.just-b  { justify-content:space-between }
.just-c  { justify-content:center }
.gap-2   { gap:8px }  .gap-3 { gap:12px } .gap-4 { gap:16px }
.gap-5   { gap:20px } .gap-6 { gap:24px } .gap-8 { gap:32px }
.mb-2    { margin-bottom:8px }   .mb-3  { margin-bottom:12px }
.mb-4    { margin-bottom:16px }  .mb-5  { margin-bottom:20px }
.mb-6    { margin-bottom:24px }  .mb-8  { margin-bottom:32px }
.mb-10   { margin-bottom:40px }  .mb-12 { margin-bottom:48px }
.mt-2    { margin-top:8px }      .mt-3  { margin-top:12px }
.mt-4    { margin-top:16px }     .mt-5  { margin-top:20px }
.mt-6    { margin-top:24px }     .mt-8  { margin-top:32px }
.mx-auto { margin-left:auto; margin-right:auto }
.w-full  { width:100% }
.hidden  { display:none !important }
.block   { display:block }
.relative{ position:relative }
.absolute{ position:absolute }
.overflow-hidden { overflow:hidden }
.border-t { border-top:1px solid var(--border) }
.border-b { border-bottom:1px solid var(--border) }
.bg-card  { background:var(--bg-card) }
.rounded  { border-radius:var(--r) }
.z1 { position:relative; z-index:1 }

/* ── 36. REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .reveal,.reveal-l,.reveal-r,.reveal-scale { opacity:1; transform:none; transition:none }
  .gradient-text { animation:none }
  .hero-glow,.hero-accent { display:none }
  .loader { animation-duration:2s }
}

/* ── 37. PRINT ────────────────────────────────────────────────── */
@media print {
  #navbar, #back-to-top, #preloader, .hero-glow, .hero-grid { display:none }
  body { background:white; color:black }
  .card, .pcard, .prodcard { border:1px solid #ccc; break-inside:avoid }
}

/* ================================================================
   38. BACKWARD-COMPAT ALIASES
   Some pages were authored against earlier class names — alias them
   to the v3 system so every page renders identically regardless of
   which naming convention it uses.
   ================================================================ */
.nx-container   { max-width:var(--max-w); margin:0 auto; padding:0 24px }
.section-title  { font-family:'Syne',sans-serif; font-size:clamp(1.85rem,4vw,2.85rem); font-weight:800; color:white; letter-spacing:-.035em; line-height:1.12; margin-bottom:16px }
.section-sub    { font-size:1.0625rem; color:var(--t2); line-height:1.75; max-width:560px }
.icon-box       { width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:20px }
.icon-box-o     { background:rgba(249,115,22,.14); color:var(--orange) }
.icon-box-p     { background:rgba(124,58,237,.14); color:var(--purple-light) }
.tech-pill      { display:inline-block; padding:4px 10px; font-size:11px; font-weight:600; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:4px; color:var(--t3); transition:color .18s,border-color .18s }
.tech-pill:hover{ color:var(--orange); border-color:rgba(249,115,22,.28) }
.tag            { display:inline-block; padding:4px 12px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:20px }
.tag-orange     { background:rgba(249,115,22,.14); color:var(--orange-light) }
.tag-purple     { background:rgba(124,58,237,.14); color:var(--purple-light) }
.tag-gray       { background:rgba(255,255,255,.07); color:var(--t3) }
.avatar         { border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:white; background:linear-gradient(135deg,var(--orange-deep),var(--purple)); width:44px; height:44px; font-size:13px }
.avatar-lg      { border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:white; background:linear-gradient(135deg,var(--orange-deep),var(--purple)); width:68px; height:68px; font-size:20px }
.avatar-xl      { border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:white; background:linear-gradient(135deg,var(--orange-deep),var(--purple)); width:80px; height:80px; font-size:24px }
.commission-badge   { font-family:'Syne',sans-serif; font-size:2.5rem; font-weight:800; line-height:1 }
.commission-badge-o { background:linear-gradient(135deg,var(--orange),var(--orange-light)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.commission-badge-p { background:linear-gradient(135deg,var(--purple),var(--purple-light)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.partner-card     { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:40px; position:relative; overflow:hidden; transition:border-color .28s,transform .28s,box-shadow .28s }
.partner-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:20px 20px 0 0 }
.partner-card-o::before { background:linear-gradient(90deg,var(--orange-deep),var(--orange)) }
.partner-card-p::before { background:linear-gradient(90deg,var(--purple-deep),var(--purple)) }
.partner-card:hover { transform:translateY(-6px) }
.partner-card-o:hover { border-color:var(--border-o); box-shadow:0 28px 70px rgba(249,115,22,.1) }
.partner-card-p:hover { border-color:var(--border-p); box-shadow:0 28px 70px rgba(124,58,237,.1) }
.product-card      { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; transition:border-color .28s,transform .28s,box-shadow .28s }
.product-card-orange:hover, .product-card-o:hover { border-color:var(--border-o); transform:translateY(-4px); box-shadow:0 20px 48px rgba(249,115,22,.08) }
.product-card-purple:hover, .product-card-p:hover { border-color:var(--border-p); transform:translateY(-4px); box-shadow:0 20px 48px rgba(124,58,237,.08) }
.testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:32px; position:relative; overflow:hidden }
.testimonial-card::before { content:'"'; position:absolute; top:18px; right:24px; font-size:80px; font-family:'Syne',sans-serif; font-weight:800; color:var(--orange); opacity:.12; line-height:1 }
.contrib-item   { padding:13px 15px; background:rgba(255,255,255,.024); border:1px solid var(--border); border-radius:var(--r-sm); font-size:13px; font-weight:600; color:var(--t2); display:flex; align-items:center; gap:9px; transition:border-color .2s,color .2s }
.contrib-item:hover { border-color:rgba(249,115,22,.3); color:white }
.why-item       { display:flex; align-items:flex-start; gap:12px; padding:16px; background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:10px; transition:border-color .2s }
.why-item:hover { border-color:rgba(249,115,22,.25) }
.why-dot        { width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:6px }
.value-card     { padding:28px; background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:var(--r); transition:border-color .25s,transform .25s }
.value-card:hover { border-color:rgba(249,115,22,.3); transform:translateY(-3px) }
.faq-a          { max-height:0; overflow:hidden; transition:max-height .4s ease }
.faq-a-inner    { padding-bottom:20px; font-size:14px; color:var(--t2); line-height:1.78 }
.comm-bar       { height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:8px }
.step           { display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border) }
.step:last-child{ border-bottom:none }
.step-number    { flex-shrink:0; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--orange-deep),var(--purple)); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:13px; font-weight:800; color:white }
.timeline       { position:relative; padding-left:36px }
.timeline::before { content:''; position:absolute; left:12px; top:4px; bottom:0; width:2px; background:linear-gradient(180deg,var(--orange),var(--purple),transparent) }
.timeline-item  { position:relative; padding-bottom:32px }
.timeline-item:last-child { padding-bottom:0 }
.timeline-dot   { position:absolute; left:-36px; top:4px; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--orange-deep),var(--purple)); border:3px solid var(--bg) }
.timeline-year  { font-family:'Syne',sans-serif; font-size:13px; font-weight:800; color:var(--orange); margin-bottom:4px }
.timeline-event { font-size:14px; color:var(--t2); line-height:1.65 }
.alert-success  { padding:15px 20px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); border-radius:var(--r-sm); color:#4ade80; font-size:14px; margin-bottom:20px }
.alert-error    { padding:15px 20px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); border-radius:var(--r-sm); color:#f87171; font-size:14px; margin-bottom:20px }
.badge-yellow   { background:rgba(234,179,8,.13); color:#fde047 }

/* Generic page-level helpers used by older page markup */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
@media(max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:768px){ .grid-2,.grid-3{ grid-template-columns:1fr } }
@media(max-width:600px){ .grid-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:380px){ .grid-4{ grid-template-columns:1fr } }

.text-center{ text-align:center } .flex{ display:flex } .flex-wrap{ flex-wrap:wrap }
.items-center{ align-items:center } .items-start{ align-items:flex-start }
.justify-between{ justify-content:space-between } .justify-center{ justify-content:center }
.gap-2{ gap:8px } .gap-3{ gap:12px } .gap-4{ gap:16px } .gap-6{ gap:24px } .gap-8{ gap:32px }
.mb-4{ margin-bottom:16px } .mb-6{ margin-bottom:24px } .mb-8{ margin-bottom:32px }
.mb-10{ margin-bottom:40px } .mb-12{ margin-bottom:48px }
.mt-4{ margin-top:16px } .mt-6{ margin-top:24px } .mt-8{ margin-top:32px }
.mx-auto{ margin-left:auto; margin-right:auto } .w-full{ width:100% }