/* ============================================================
   Light Up Badge Lanyard – Custom Glow Badge Lanyards (Decision Tree)
   Static CSS (Tailwind equivalents + custom styles)
   ============================================================ */

/* ---------- Reset & Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#000;color:#fff;scroll-behavior:smooth;overflow-x:hidden;line-height:1.6}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;text-transform:uppercase}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Typography Scale ---------- */
.text-xs{font-size:0.8125rem;line-height:1.5}        /* 13px */
.text-sm{font-size:0.9375rem;line-height:1.6}        /* 15px */
.text-base{font-size:1rem;line-height:1.6}           /* 16px */
.text-lg{font-size:1.25rem;line-height:1.75}         /* 20px */
.text-2xl{font-size:1.5rem;line-height:1.4}          /* 24px */
.text-3xl{font-size:1.875rem;line-height:1.25}       /* 30px */
.text-4xl{font-size:2.25rem;line-height:1.2}         /* 36px */
.text-5xl{font-size:3rem;line-height:1.1}            /* 48px */
.text-\[8px\]{font-size:8px}
.text-\[9px\]{font-size:9px}
.text-\[10px\]{font-size:0.6875rem}                  /* 11px */
.text-\[11px\]{font-size:0.75rem}                    /* 12px */
.md\:text-4xl{font-size:2.25rem;line-height:1.2}
.md\:text-5xl{font-size:3rem;line-height:1.1}
.md\:text-7xl{font-size:4.5rem;line-height:1.05}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.leading-\[1\.05\]{line-height:1.05}
.leading-relaxed{line-height:1.75}
.tracking-wider{letter-spacing:0.05em}
.tracking-widest{letter-spacing:0.1em}
.tracking-\[0\.3em\]{letter-spacing:0.3em}
.tracking-\[0\.5em\]{letter-spacing:0.5em}
.uppercase{text-transform:uppercase}
.text-center{text-align:center}
.text-left{text-align:left}
.font-\[\'Space\+Grotesk\'\]{font-family:'Space Grotesk',sans-serif}
.inline-block{display:inline-block}

/* ---------- Body text enlargement (headings untouched) ---------- */
section .text-sm,section .text-slate-400,section .text-slate-500,section .text-slate-600,section p{font-size:1.125rem!important;line-height:1.7!important}
section .text-xs{font-size:1rem!important}
section .text-\[11px\]{font-size:0.875rem!important}
section .text-\[10px\]{font-size:0.8125rem!important}
section .text-\[9px\]{font-size:0.75rem!important}

/* ---------- Text Colors ---------- */
.text-white{color:#fff}
.text-slate-300{color:#cbd5e1}
.text-slate-400{color:#94a3b8}
.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}
.text-slate-800{color:#1e293b}
.text-indigo-400{color:#818cf8}
.text-white\/70{color:rgba(255,255,255,0.7)}
.text-white\/80{color:rgba(255,255,255,0.8)}
.text-white\/90{color:rgba(255,255,255,0.9)}
.hover\:text-indigo-400:hover{color:#818cf8}
.hover\:text-indigo-300:hover{color:#a5b4fc}
.hover\:text-white:hover{color:#fff}

/* ---------- Backgrounds & Gradients ---------- */
.bg-indigo-600{background-color:#4f46e5}
.hover\:bg-indigo-500:hover{background-color:#6366f1}
.bg-white\/\[0\.01\]{background-color:rgba(255,255,255,0.01)}
.bg-white\/\[0\.02\]{background-color:rgba(255,255,255,0.02)}
.bg-indigo-500\/10{background-color:rgba(99,102,241,0.1)}
.bg-black\/80{background-color:rgba(0,0,0,0.8)}
.bg-\[\#25D366\]{background-color:#25D366}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.from-black\/10{--tw-gradient-from:rgba(0,0,0,0.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.from-black\/80{--tw-gradient-from:rgba(0,0,0,0.8);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.via-transparent{--tw-gradient-via:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to)}
.via-black\/50{--tw-gradient-via:rgba(0,0,0,0.5);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to)}
.to-black\/30{--tw-gradient-to:rgba(0,0,0,0.3)}
.to-black\/20{--tw-gradient-to:rgba(0,0,0,0.2)}
.opacity-30{opacity:0.3}
.opacity-40{opacity:0.4}

/* ---------- Borders ---------- */
.border{border-width:1px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-white\/5{border-color:rgba(255,255,255,0.05)}
.border-white\/8{border-color:rgba(255,255,255,0.08)}
.border-white\/10{border-color:rgba(255,255,255,0.1)}
.border-white\/15{border-color:rgba(255,255,255,0.15)}
.hover\:border-white\/30:hover{border-color:rgba(255,255,255,0.3)}
.hover\:bg-white\/\[0\.01\]:hover{background-color:rgba(255,255,255,0.01)}
.rounded-full{border-radius:9999px}
.rounded-2xl{border-radius:1rem}

/* ---------- Layout: Flex ---------- */
.flex{display:flex}
.inline-flex{display:inline-flex}
.flex-wrap{flex-wrap:wrap}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.hidden{display:none}
.md\:flex{display:flex}
.md\:inline{display:inline}
.md\:flex-row{flex-direction:row}

/* ---------- Layout: Grid ---------- */
.grid{display:grid}
.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
.lg\:grid-cols-12{grid-template-columns:repeat(12,1fr)}
.lg\:col-span-5{grid-column:span 5 / span 5}
.lg\:col-span-7{grid-column:span 7 / span 7}

/* ---------- Position ---------- */
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-6{top:1.5rem}
.left-6{left:1.5rem}
.right-6{right:1.5rem}
.bottom-8{bottom:2rem}
.right-8{right:2rem}
.-top-24{top:-6rem}
.-right-24{right:-6rem}
.z-0{z-index:0}
.z-10{z-index:10}
.z-50{z-index:50}
.z-\[1\]{z-index:1}
.z-\[100\]{z-index:100}
.object-cover{object-fit:cover}
.overflow-hidden{overflow:hidden}

/* ---------- Sizing ---------- */
.w-full{width:100%}
.h-full{height:100%}
.w-auto{width:auto}
.h-8{height:2rem}
.w-7{width:1.75rem}
.h-7{height:1.75rem}
.w-\[500px\]{width:500px}
.h-\[500px\]{height:500px}
.min-h-screen{min-height:100vh}
.md\:h-10{height:2.5rem}

/* ---------- Containers ---------- */
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* ---------- Spacing ---------- */
.p-4{padding:1rem}
.p-8{padding:2rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-4{padding-top:1rem}
.pt-8{padding-top:2rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-12{margin-top:3rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-14{margin-bottom:3.5rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}
.space-y-3 > * + *{margin-top:0.75rem}
.md\:p-12{padding:3rem}

/* ---------- Effects ---------- */
.transition{transition:all 0.3s ease}
.transition-transform{transition:transform 0.3s ease}
.duration-300{transition-duration:300ms}
.hover\:scale-110:hover{transform:scale(1.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1)}
.cursor-pointer{cursor:pointer}

/* ---------- Custom: Navigation ---------- */
.nav-bg{background:rgba(10,10,10,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-radius:60px;padding:0.6rem 2rem}
@media(max-width:768px){.nav-bg{border-radius:40px;padding:0.5rem 1.2rem}}

/* ---------- Custom: Gradient text ---------- */
.gradient-text{background:linear-gradient(135deg,#a5b4fc,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ---------- Custom: Glow orb ---------- */
.glow-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:0.4}

/* ---------- Custom: Section ---------- */
.section{padding:90px 0;position:relative}
.section-tag{display:inline-block;font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#818cf8;margin-bottom:16px;background:rgba(99,102,241,0.1);padding:5px 16px;border-radius:20px;border:1px solid rgba(99,102,241,0.2)}

/* ---------- Custom: Hero right card ---------- */
.hero-card{border:1px solid rgba(255,255,255,0.1);border-radius:20px;background:rgba(0,0,0,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:28px}
.hero-node{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.hero-node:last-child{border-bottom:none}
.hero-node-code{font-family:'Space Grotesk',sans-serif;font-size:14px;letter-spacing:0.2em;color:#06b6d4;background:rgba(6,182,212,0.08);border:1px solid rgba(6,182,212,0.25);border-radius:12px;padding:5px 12px;flex-shrink:0}
.hero-node-name{font-size:16px;color:#e2e8f0;font-weight:600}
.hero-node-sub{font-size:14px;color:#64748b;margin-top:3px}
.hero-node-arrow{margin-left:auto;color:#a5b4fc;font-size:15px}

/* ---------- Custom: Decision tree ---------- */
.tree-node{padding:26px 0;border-bottom:1px solid rgba(255,255,255,0.07)}
.tree-node:last-child{border-bottom:none}
.node-title{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.node-code{font-family:'Space Grotesk',sans-serif;font-size:14px;letter-spacing:0.25em;color:#06b6d4;font-weight:700}
.node-q{font-size:26px;color:#fff;font-weight:700}
@media(max-width:768px){.node-q{font-size:20px}}
.branch{margin-left:22px;padding-left:26px;border-left:1px solid rgba(99,102,241,0.25);padding-bottom:8px}
.branch:last-child{border-left-color:transparent}
.branch-label{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.branch-code{font-family:'Space Grotesk',sans-serif;font-size:14px;letter-spacing:0.2em;color:#a5b4fc;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.25);border-radius:14px;padding:4px 14px}
.branch-name{font-size:18px;color:#fff;font-weight:700}
.branch-out{font-size:15px;color:#22d3ee;letter-spacing:0.06em}
.branch-text p{color:#94a3b8;font-size:17px;line-height:1.7}
.branch-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.branch-tags span{font-size:14px;color:#22d3ee;border:1px solid rgba(6,182,212,0.2);border-radius:14px;padding:3px 12px}

/* ---------- Custom: Mid-size image row ---------- */
.mid-img{width:100%;height:200px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,0.08)}

/* ---------- Custom: Combo cards ---------- */
.combo-card{position:relative;border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:26px 22px;background:rgba(255,255,255,0.015);transition:all .3s ease}
.combo-card:hover{border-color:rgba(99,102,241,0.35);transform:translateY(-3px)}
.combo-tag{display:inline-block;font-size:14px;letter-spacing:0.2em;text-transform:uppercase;color:#22d3ee;border:1px solid rgba(6,182,212,0.25);border-radius:16px;padding:4px 14px;margin-bottom:12px}
.combo-card h4{font-size:17px;color:#fff;font-weight:700;margin-bottom:8px}
.combo-card p{font-size:16px;color:#94a3b8;line-height:1.7}
.combo-line{border-top:1px solid rgba(255,255,255,0.06);margin-top:14px;padding-top:12px;font-size:15px;color:#cbd5e1}
.combo-line strong{color:#fff}

/* ---------- Custom: Content image ---------- */
.content-img{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);margin:22px 0}
.content-img img{width:100%;display:block}
.content-img .cap{font-size:14px;color:#64748b;text-align:center;padding:10px;border-top:1px solid rgba(255,255,255,0.05)}

/* ---------- Custom: FAQ ---------- */
.faq-a{display:none}.faq-a.open{display:block}

/* ---------- Custom: HubSpot form ---------- */
#hubspot-form-container .stat-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:16px;backdrop-filter:blur(8px)}
#hubspot-form-container .border-glow{background:linear-gradient(135deg,rgba(99,102,241,0.5),rgba(6,182,212,0.5));padding:1px;border-radius:18px}
#hubspot-form-container .hs-form{display:flex;flex-direction:column;gap:14px}
#hubspot-form-container .hs-form fieldset{max-width:100%!important}
#hubspot-form-container .hs-form-field{margin:0!important}
#hubspot-form-container label{color:#94a3b8!important;font-size:12px!important;letter-spacing:0.08em!important}
#hubspot-form-container .hs-input{width:100%;background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:10px!important;color:#fff!important;padding:12px 14px!important;font-size:14px!important;outline:none!important}
#hubspot-form-container .hs-input:focus{border-color:rgba(99,102,241,0.5)!important}
#hubspot-form-container input[type=submit],#hubspot-form-container .hs-button{background:linear-gradient(135deg,#6366f1,#06b6d4)!important;color:#fff!important;border:none!important;border-radius:30px!important;padding:14px 34px!important;font-weight:700!important;letter-spacing:0.08em!important;text-transform:uppercase!important;font-size:13px!important;cursor:pointer!important}
#hubspot-form-container .hs-richtext,#hubspot-form-container .legal-consent-container{color:#64748b!important;font-size:12px!important}
#hubspot-form-container .legal-consent-container a{color:#818cf8;text-decoration:underline}
#hubspot-form-container .hs-error-msgs{color:#f87171!important;font-size:12px!important}

/* ---------- Responsive (768px+) ---------- */
@media (min-width: 768px) {
  .md\:flex{display:flex}
  .md\:inline{display:inline}
  .md\:flex-row{flex-direction:row}
  .md\:h-10{height:2.5rem}
  .md\:p-12{padding:3rem}
  .md\:text-4xl{font-size:2.25rem;line-height:1.2}
  .md\:text-5xl{font-size:3rem;line-height:1.1}
  .md\:text-7xl{font-size:4.5rem;line-height:1.05}
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Responsive (1024px+) ---------- */
@media (min-width: 1024px) {
  .lg\:grid-cols-12{grid-template-columns:repeat(12,1fr)}
  .lg\:col-span-5{grid-column:span 5 / span 5}
  .lg\:col-span-7{grid-column:span 7 / span 7}
}