refactor: adjust network page styling and typography

- Changed heading levels from H3 to H4 in NetworkCapabilities for better hierarchy
- Updated PrimaryFeatures section with darker background and consistent border styling
- Removed text-lg class from paragraph for standard sizing

src/pages/network/Features.tsx

@@ -9,6 +9,7 @@ export function Features() {
   return (
     <section className="w-full max-w-8xl mx-auto bg-transparent">
       
+
       {/* ✅ Top spacer + full-width line */}
       <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
       <div className="w-full border-t border-l border-r border-gray-100" />

src/pages/network/NetworkCapabilities.tsx

@@ -5,7 +5,7 @@ import {
   NoSymbolIcon,
 } from '@heroicons/react/24/solid'
 
-import { Eyebrow, H3, P } from '@/components/Texts'
+import { Eyebrow, H4, P } from '@/components/Texts'
 
 export function NetworkCapabilities() {
   return (
@@ -22,11 +22,11 @@ export function NetworkCapabilities() {
         <div className="max-w-xl ">
           <Eyebrow>WHAT IT ENABLES</Eyebrow>
 
-          <H3 className="mt-6 text-white">
+          <H4  className="mt-6 text-white">
             A Private Networking Layer for Everything You Run
-          </H3>
+          </H4>
 
-          <P className="mt-6 text-lg text-gray-200">
+          <P className="mt-6 text-gray-200">
             Mycelium Network is the backbone for secure, autonomous connectivity
             across devices, data centers, clusters, and self-hosted environments — anywhere in the world.
           </P>

src/pages/network/PrimaryFeatures.tsx

@@ -407,9 +407,12 @@ export function PrimaryFeatures() {
     <section
       id="howitworks"
       aria-label="Features for investing all your money"
-      className="bg-gray-900 py-20 sm:py-32"
+      className="bg-[#121212]"
     >
-      <Container>
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+      <Container className="pt-12 border border-t-0 border-b-0 border-gray-800">
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl ">
           <Eyebrow color="accent">How It Works</Eyebrow>
           <SectionHeader color="white" className="mt-2">
@@ -425,9 +428,12 @@ export function PrimaryFeatures() {
       <div className="mt-16 md:hidden">
         <FeaturesMobile />
       </div>
-      <Container className="hidden md:mt-20 md:block">
+      <Container className="hidden pt-12 pb-12 md:block border border-t-0 border-b-0 border-gray-800">
         <FeaturesDesktop />
       </Container>
+       {/* ✅ bottom border + bottom spacer to match */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   )
 }