:root {
  --background: #F7F5FF;
  --foreground: #1A1033;
  --primary: #6C3FF5;
  --primary-foreground: #FFFFFF;
  --secondary: #EDE9FF;
  --secondary-foreground: #1A1033;
  --accent: #9B6BFF;
  --accent-foreground: #FFFFFF;
  --muted: #EDE9FF;
  --muted-foreground: #6B5B9A;
  --card: #FFFFFF;
  --card-foreground: #1A1033;
  --border: #DDD6FF;
  --input: #EDE9FF;
  --ring: #6C3FF5;
  --radius: 16px;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
}

@layer base {
  * {
    box-sizing: border-box;
    border-color: var(--border);
  }
  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
  }
  html {
    scroll-behavior: smooth;
  }
  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }
  /* One step bolder for all text elements except hero and inputs */
  p, span, li, td, th, label, a, button {
    font-weight: inherit;
  }
  /* Focus visible for keyboard navigation */
  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}

@layer utilities {
  .text-hero-xl {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .text-section-title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .gradient-hero-bg {
    background: radial-gradient(ellipse 80% 60% at 50% -10%, #7C4DFF 0%, #6C3FF5 30%, #4B1FD6 60%, #2D0EA3 100%);
  }
  .blob-primary {
    background: radial-gradient(circle, #9B6BFF 0%, #6C3FF5 60%, transparent 100%);
    filter: blur(80px);
  }
  .blob-accent {
    background: radial-gradient(circle, #C4A8FF 0%, #9B6BFF 50%, transparent 100%);
    filter: blur(60px);
  }
  .card-hover {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  }
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(108, 63, 245, 0.15);
  }
  .tool-row-hover {
    transition: background-color 0.18s ease, transform 0.18s ease;
  }
  .tool-row-hover:hover {
    background-color: var(--muted);
    transform: translateX(3px);
  }
  .nav-link-style {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted-foreground);
    transition: color 0.15s ease;
  }
  .nav-link-style:hover {
    color: var(--foreground);
  }
  .browser-chrome {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35), 0 8px 32px rgba(0, 0, 0, 0.2);
  }
  .browser-toolbar {
    background: #F3F3F3;
    border-bottom: 1px solid #E5E5E5;
    border-radius: 12px 12px 0 0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .progress-bar-fill {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .category-tab-active {
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 8px;
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  .animate-gradient-shift {
    animation: gradientShift 8s ease-in-out infinite alternate;
  }
  .animate-blob-1 {
    animation: blobMove1 12s ease-in-out infinite;
  }
  .animate-blob-2 {
    animation: blobMove2 15s ease-in-out infinite;
  }
  .animate-fade-up {
    animation: fadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .scroll-reveal {
    opacity: 1;
  }
  /* Smooth custom select dropdown */
  .smooth-select {
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .smooth-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 63, 245, 0.15);
  }
  /* Custom dropdown option animation wrapper */
  .dropdown-animate {
    position: relative;
  }
  .dropdown-animate select {
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
  }
  .dropdown-animate select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 63, 245, 0.15);
  }
  .dropdown-animate select:hover {
    border-color: rgba(108, 63, 245, 0.4);
    background-color: var(--secondary);
  }
  /* Prose styles for article/guide pages */
  .prose-nexdownload h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--foreground);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
  }
  .prose-nexdownload h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .prose-nexdownload p {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted-foreground);
    line-height: 1.75;
    margin-bottom: 1rem;
  }
  .prose-nexdownload ul, .prose-nexdownload ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
  }
  .prose-nexdownload li {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted-foreground);
    line-height: 1.7;
    margin-bottom: 0.35rem;
  }
  .prose-nexdownload strong {
    font-weight: 800;
    color: var(--foreground);
  }
  .prose-nexdownload table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
  }
  .prose-nexdownload th {
    background: var(--secondary);
    font-weight: 700;
    color: var(--foreground);
    padding: 0.625rem 1rem;
    text-align: left;
    border: 1px solid var(--border);
  }
  .prose-nexdownload td {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    color: var(--muted-foreground);
    font-weight: 500;
  }
  .prose-nexdownload tr:nth-child(even) td {
    background: var(--muted);
  }
  /* Touch target utilities for mobile */
  .touch-target {
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .touch-target-lg {
    min-height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes blobMove1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes blobMove2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(1.05); }
  66% { transform: translate(20px, -20px) scale(0.9); }
}

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

@keyframes progressFill {
  from { width: 0%; }
  to { width: var(--target-width); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}
.font-400{font-weight:400}.font-500{font-weight:500}.font-600{font-weight:600}.font-700{font-weight:700}.font-800{font-weight:800}


/* PHP conversion compatibility: preserve original Next/Tailwind heading scale */
.text-hero-xl {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.text-section-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.site-brand-logo {
  background: transparent !important;
  display: block;
}

/* Main-title typography: Plus Jakarta Sans SemiBold (600).
   Keep the existing title sizes/spacing; only reduce the H1 weight. */
@font-face {
  font-family: 'NEX Original Plus Jakarta Sans';
  src: url('https://cdn.jsdelivr.net/gh/tokotype/PlusJakartaSans@2.7.1/fonts/webfonts/PlusJakartaSans%5Bwght%5D.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

h1.font-800 {
  font-family: 'NEX Original Plus Jakarta Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-synthesis: style;
}

/* Keep the exact title scale/metrics from the Node source. */
h1.text-hero-xl {
  font-size: clamp(2.5rem, 7vw, 5.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

h1.text-section-title {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}

/* Header logo visibility/size fix: keep the brand legible on the fixed header. */
header .site-brand-logo {
  height: 2rem !important;
  width: auto !important;
}

/* Navigation stability and mobile reading fixes */
html{scroll-padding-top:88px;}
body{overflow-x:hidden;}
.site-header{background:var(--card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.site-header+*{isolation:isolate;}
.nd-longcopy p{max-width:78ch;}
@media(max-width:640px){.nd-longcopy{font-size:1rem}.nd-longcopy table{font-size:.875rem}.nd-longcopy h2{line-height:1.25}.nd-longcopy h3{line-height:1.3}}


/* Final navigation, dropdown, FAQ and category hub stability */
.site-header{background:rgba(255,255,255,.985)!important;box-shadow:0 1px 0 rgba(36,18,82,.07);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;isolation:isolate}
.site-header-inner{min-height:64px}
.site-nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.65rem .82rem;border-radius:.7rem;color:var(--muted-foreground);font-size:.9rem;font-weight:600;line-height:1;min-height:42px;white-space:nowrap;transition:background .15s ease,color .15s ease}
.site-nav-link:hover,.site-nav-dropdown[open]>.site-nav-summary{background:var(--muted);color:var(--foreground)}
.site-nav-dropdown{position:relative}
.site-nav-dropdown>summary{list-style:none;cursor:pointer;user-select:none}
.site-nav-dropdown>summary::-webkit-details-marker{display:none}
.site-nav-dropdown[open] .site-nav-summary svg{transform:rotate(180deg)}
.site-nav-summary svg{transition:transform .15s ease}
.site-nav-menu{position:absolute;top:calc(100% + .6rem);left:0;width:270px;padding:.65rem;background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 18px 50px rgba(36,18,82,.14);z-index:120}
.site-nav-menu-heading{padding:.4rem .65rem .55rem;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.site-nav-menu-item{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.68rem .7rem;border-radius:.7rem;color:var(--foreground);font-size:.82rem;font-weight:650;line-height:1.25;text-decoration:none!important}
.site-nav-menu-item:hover{background:var(--muted);color:var(--primary)}
.site-nav-menu-arrow{color:var(--border);font-size:1.05rem}
.site-nav-menu-item:hover .site-nav-menu-arrow{color:var(--primary)}
.site-header-search{position:relative;width:185px;height:40px;display:flex;align-items:center;gap:.5rem;padding:0 .75rem;background:var(--muted);border:1px solid var(--border);border-radius:1rem;color:var(--muted-foreground);transition:width .16s ease,border-color .16s ease,box-shadow .16s ease}
.site-header-search:focus-within{width:225px;border-color:rgba(108,63,245,.35);box-shadow:0 0 0 3px rgba(108,63,245,.08)}
.site-header-search input{width:100%;min-width:0;background:transparent;border:0;outline:0;font:600 .78rem/1.2 'Plus Jakarta Sans',sans-serif;color:var(--foreground)}
.site-search-results{position:absolute;top:calc(100% + .6rem);left:0;right:0;min-width:285px;background:var(--card);border:1px solid var(--border);border-radius:.9rem;box-shadow:0 18px 50px rgba(36,18,82,.14);overflow:hidden;z-index:130;padding:.35rem}
.site-search-results[hidden]{display:none!important}
.site-search-results a{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .75rem;border-radius:.65rem;text-decoration:none;color:var(--foreground);font-size:.78rem}
.site-search-results a:hover{background:var(--muted)}.site-search-results span{font-size:.68rem;color:var(--muted-foreground)}
.site-mobile-menu-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:transparent;border-radius:.7rem;color:var(--foreground)}.site-mobile-menu-button:hover{background:var(--muted)}
.site-mobile-panel{transition:opacity .18s ease}.site-mobile-backdrop{border:0;background:rgba(26,14,52,.38)}.site-mobile-sheet{transition:transform .2s ease}
.site-mobile-nav-link,.site-mobile-details>summary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.8rem .85rem;border-radius:.8rem;color:var(--foreground);font-size:.86rem;font-weight:700;text-decoration:none;list-style:none;cursor:pointer}.site-mobile-nav-link:hover,.site-mobile-details>summary:hover{background:var(--muted);color:var(--primary)}.site-mobile-details>summary::-webkit-details-marker{display:none}.site-mobile-submenu{padding:.25rem 0 .25rem .45rem}.site-mobile-submenu .site-nav-menu-item{padding:.65rem .75rem}
.faq-native>summary{list-style:none}.faq-native>summary::-webkit-details-marker{display:none}.faq-native[open]{border-color:rgba(108,63,245,.3);background:rgba(108,63,245,.025)}.faq-native .faq-native-icon{transition:transform .18s ease,background .18s ease}.faq-native[open] .faq-native-icon{transform:rotate(180deg);background:rgba(108,63,245,.1);color:var(--primary)}
.category-hub-hero{max-width:72rem;margin-left:auto;margin-right:auto;text-align:center}.category-hub-hero>div{margin-left:auto!important;margin-right:auto!important}.category-hub-grid{max-width:72rem;margin-left:auto!important;margin-right:auto!important}
@media(max-width:1090px){.site-header-search{width:160px}.site-header-search:focus-within{width:185px}.site-nav-link{padding-left:.65rem;padding-right:.65rem}}
@media(max-width:767px){.site-header{background:#fff!important}.site-header-search{display:none}.category-hub-hero{text-align:center}.category-hub-grid{padding-left:1rem!important;padding-right:1rem!important}}


/* V5 readability pass: one font family, calmer weights, and comfortable small text. */
html,body,button,input,select,textarea,summary{font-family:'Plus Jakarta Sans',sans-serif!important}
body{font-size:16px;line-height:1.65;font-weight:500}
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',sans-serif!important}
h1.font-800{font-family:'Plus Jakarta Sans',sans-serif!important}
.site-nav-link{font-size:.91rem;font-weight:600}
.site-nav-menu-heading{font-size:.74rem;font-weight:700;letter-spacing:.055em}
.site-nav-menu-item{font-size:.86rem;font-weight:600;line-height:1.35}
.site-header-search input{font:500 .82rem/1.25 'Plus Jakarta Sans',sans-serif}
.site-search-results a{font-size:.82rem;font-weight:600}.site-search-results span{font-size:.74rem;font-weight:500}
.site-mobile-nav-link,.site-mobile-details>summary{font-size:.92rem;font-weight:600}
.faq-native>summary{min-height:58px}
.faq-native>summary>span:first-child{font-size:.95rem!important;font-weight:600!important;line-height:1.45}
footer .text-xs{font-size:.79rem!important;line-height:1.55}
footer .font-800{font-weight:700!important}
footer .font-600,footer .font-700{font-weight:600!important}
footer .text-sm{line-height:1.65}
@media(max-width:640px){body{font-size:15.5px}.site-nav-menu-item{font-size:.9rem}.faq-native>summary>span:first-child{font-size:.93rem!important}}


/* V6 header stability: fully style the fixed navigation without depending on runtime Tailwind generation. */
.site-header{
  position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1000!important;
  width:100%!important;height:72px!important;background:#fff!important;border-bottom:1px solid var(--border)!important;
  box-shadow:0 1px 0 rgba(36,18,82,.07)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  font-family:'Plus Jakarta Sans',Arial,sans-serif!important;
}
.site-header-inner{
  width:100%!important;max-width:1280px!important;height:72px!important;min-height:72px!important;margin:0 auto!important;
  padding:0 24px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;
}
.site-header-inner>a:first-child{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;text-decoration:none!important;}
.site-header .site-brand-logo{display:block!important;height:32px!important;width:auto!important;max-width:none!important;}
.site-desktop-nav{display:flex!important;align-items:center!important;gap:4px!important;min-width:0!important;flex:0 1 auto!important;}
.site-header-actions{display:flex!important;align-items:center!important;gap:12px!important;flex:0 0 auto!important;}
.site-header-actions>a:last-child{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;padding:10px 16px!important;border-radius:12px!important;background:var(--primary)!important;color:#fff!important;font-size:.875rem!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;transition:background-color .15s ease!important;}
.site-header-actions>a:last-child:hover{background:var(--accent)!important;}
.site-header-search{flex:0 0 auto!important;}
.site-header-search>svg{display:block!important;flex:0 0 auto!important;}
.site-header-search input{display:block!important;}
.site-nav-dropdown{display:block!important;}
.site-nav-summary{display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.site-nav-summary svg{display:block!important;flex:0 0 auto!important;}
.site-mobile-menu-button{display:none!important;flex:0 0 auto!important;}
.site-mobile-panel{display:none!important;}

/* Keep the header geometry identical before and after JS/font hydration. */
.site-header,.site-header *{box-sizing:border-box;}
.site-header a,.site-header button,.site-header summary,.site-header input{font-family:'Plus Jakarta Sans',Arial,sans-serif!important;}
.site-nav-link{height:42px!important;min-height:42px!important;padding:0 13px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-size:14.5px!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important;}
.site-nav-menu{margin:0!important;}

/* Mobile panel critical styles, also independent from Tailwind CDN. */
@media (max-width:1023px){
  .site-header-inner{padding:0 20px!important;}
  .site-desktop-nav{display:none!important;}
  .site-mobile-menu-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;}
  .site-mobile-panel{display:block!important;position:fixed!important;inset:0!important;z-index:1100!important;transition:opacity .18s ease!important;}
  .site-mobile-panel.opacity-0{opacity:0!important;pointer-events:none!important;}
  .site-mobile-panel.opacity-100{opacity:1!important;pointer-events:auto!important;}
  .site-mobile-backdrop{position:absolute!important;inset:0!important;}
  .site-mobile-sheet{position:absolute!important;top:0!important;right:0!important;bottom:0!important;width:min(88vw,340px)!important;background:#fff!important;display:flex!important;flex-direction:column!important;padding:20px!important;transition:transform .2s ease!important;}
  .site-mobile-sheet.translate-x-full{transform:translateX(100%)!important;}
  .site-mobile-sheet.translate-x-0{transform:translateX(0)!important;}
}
@media (max-width:767px){
  .site-header{height:64px!important;}
  .site-header-inner{height:64px!important;min-height:64px!important;padding:0 16px!important;}
  .site-header .site-brand-logo{height:29px!important;}
  .site-header-actions{display:none!important;}
}
@media (min-width:1024px){
  .site-mobile-panel{display:none!important;}
}

/* ADSENSE-READABILITY-PATCH: keep informational pages comfortable on desktop and mobile. */
:root{--nd-readable-body:15.5px}
@media (min-width:640px){:root{--nd-readable-body:16px}}
main p.text-xs:not(.uppercase), footer p.text-xs{line-height:1.55}
main article p{font-size:max(var(--nd-readable-body),1em)}
main article .text-sm{font-size:0.94rem}
.site-nav-menu-item,.site-nav-link{font-weight:600}
.site-nav-menu-item{min-height:42px}
button,summary,a{touch-action:manipulation}