.htnj-page {
--ink: #132033;
--muted: #5c6879;
--line: #dfe7f3;
--soft: #f6f9ff;
--blue: #2257f2;
--violet: #7a4cff;
--cyan: #15b8d6;
--navy: #08142a;
--white: #fff;
}
.htnj-page, .htnj-page * {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
.htnj-page {
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.7;
overflow: hidden
}
.htnj-page-progress {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--blue), var(--violet), var(--cyan))
}
.htnj-page h1, .htnj-page h2, .htnj-page h3 {
line-height: 1.15;
font-weight: 800;
letter-spacing: -.03em
}
.htnj-page p {
color: var(--muted)
}
.htnj-section {
padding: 92px 0
}
.htnj-section-heading {
margin: 0 auto 42px;
text-align: center
}
.htnj-section-heading h2 {
font-size: clamp(2rem, 4vw, 3.4rem);
}
.htnj-haddon-hero {
position: relative;
overflow: hidden;
padding: 110px 0 96px;
background: linear-gradient(135deg, #071329 0%, #0b2040 58%, #17204c 100%);
color: #fff
}
.htnj-haddon-hero:after {
content: "";
position: absolute;
inset: auto -10% -45% 30%;
height: 520px;
}
.htnj-hero-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: linear-gradient(to bottom, black, transparent)
}
.htnj-hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: 70px;
align-items: center
}
.htnj-hero-kicker {
display: inline-flex;
gap: 9px;
align-items: center;
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 999px;
background: rgba(255, 255, 255, .07);
font-size: .9rem
}
.htnj-hero-copy h1 {
font-size: clamp(2.8rem, 6vw, 4.5rem);
margin: 24px 0 22px;
max-width: 900px;
color:#fff;
}
.htnj-hero-copy p {
color: #cad6e9;
}
.htnj-hero-lead {
font-size: 1.25rem;
color: #fff !important
}
.htnj-hero-visual {
position: relative;
min-height: 500px;
display: grid;
place-items: center
}
.htnj-radar {
position: absolute;
width: 390px;
height: 390px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .15);
box-shadow: 0 0 0 60px rgba(255, 255, 255, .035), 0 0 0 120px rgba(255, 255, 255, .025)
}
.htnj-radar:before, .htnj-radar:after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
background: linear-gradient(90deg, transparent, rgba(73, 193, 255, .7));
transform-origin: left center
}
.htnj-radar:before {
width: 195px;
height: 1px;
animation: htnj-spin 8s linear infinite
}
.htnj-radar:after {
width: 1px;
height: 390px;
top: 0;
background: rgba(255, 255, 255, .08)
}
.htnj-core {
width: 116px;
height: 116px;
border-radius: 28px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #2d65ff, #7a4cff);
box-shadow: 0 20px 60px rgba(39, 92, 255, .4);
font-size: 2rem;
z-index: 2
}
.htnj-node {
position: absolute;
width: 66px;
height: 66px;
border-radius: 20px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .22);
backdrop-filter: blur(10px);
font-size: 1.25rem
}
.htnj-n1 {
top: 11%;
left: 19%
}
.htnj-n2 {
top: 16%;
right: 10%
}
.htnj-n3 {
bottom: 17%;
right: 10%
}
.htnj-n4 {
bottom: 9%;
left: 22%
}
.htnj-n5 {
top: 48%;
left: 2%
}
@keyframes htnj-spin {
to {
transform: rotate(360deg)
}
}
.htnj-intent-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 38px 0
}
.htnj-intent-pill {
padding: 22px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 40px rgba(17, 41, 86, .06);
display: flex;
gap: 12px
}
.htnj-intent-pill i {
color: var(--blue);
margin-top: 5px
}
.htnj-narrow-copy {
max-width: 840px;
margin: auto
}
.htnj-services-section {
background: var(--soft)
}
.htnj-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}
.htnj-service-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 28px;
padding: 34px;
box-shadow: 0 18px 55px rgba(17, 41, 86, .07);
transition: .25s transform, .25s box-shadow
}
.htnj-service-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 70px rgba(17, 41, 86, .12)
}
.htnj-service-icon {
width: 58px;
height: 58px;
border-radius: 16px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #eaf0ff, #f0eaff);
color: var(--blue);
font-size: 1.4rem;
margin-bottom: 18px
}
.htnj-service-card h2 {
font-size: 2rem
}
.htnj-service-card h3 {
font-size: 1.12rem;
margin-top: 24px
}
.htnj-clean-list {
padding-left: 20px;
color: var(--muted);
columns: 2
}
.htnj-clean-list li {
margin: 5px 0;
break-inside: avoid
}
.htnj-source-cta, .htnj-center-cta a, .htnj-final-btn {
display: inline-flex;
margin-top: 15px;
padding: 12px 18px;
border-radius: 12px;
background: var(--ink);
color: #fff;
text-decoration: none;
font-weight: 700
}
.htnj-intent-section {
background: #fff
}
.htnj-quote-panel {
margin: 0 auto 34px;
padding: 34px;
border-radius: 26px;
background: linear-gradient(135deg, #0c1932, #142750);
color: #fff
}
.htnj-quote-panel p {
color: #dbe5f5
}
.htnj-quote-panel blockquote {
font-size: 1.5rem;
font-weight: 800;
margin: 12px 0;
color: #fff
}
.htnj-five-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px
}
.htnj-mini-card {
padding: 24px;
border: 1px solid var(--line);
border-radius: 18px
}
.htnj-mini-card h3 {
font-size: 1.08rem
}
.htnj-local-section {
background: linear-gradient(180deg, #f7f9fd, #fff)
}
.htnj-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: start
}
.htnj-split h2 {
font-size: clamp(2rem, 3.5vw, 2rem)
}
.htnj-market-panel {
padding: 34px;
border: 1px solid var(--line);
border-radius: 28px;
background: #fff;
box-shadow: 0 20px 60px rgba(17, 41, 86, .08)
}
.htnj-market-flow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0
}
.htnj-market-flow span {
padding: 9px 12px;
border-radius: 999px;
background: #eef3ff;
color: #2347a0;
font-weight: 700;
font-size: .9rem
}
.htnj-why-section {
background: #07152c;
color: #fff
}
.htnj-why-section p {
color: #c8d4e7
}
.htnj-center-title {
text-align: center;
margin: 46px 0 24px
}
.htnj-core-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}
.htnj-core-card {
padding: 24px;
border: 1px solid rgba(255, 255, 255, .13);
background: rgba(255, 255, 255, .06);
border-radius: 18px;
color: #dfe8f7
}
.htnj-center-cta {
text-align: center;
margin-top: 24px
}
.htnj-center-cta a {
background: #fff;
color: #0b1730
}
.htnj-location-section {
background: #fff
}
.htnj-address-card {
padding: 24px;
border-radius: 18px;
background: #eef4ff;
border-left: 4px solid var(--blue);
font-weight: 700;
margin: 18px 0
}
.htnj-goal-grid {
display: grid;
gap: 14px
}
.htnj-goal-card {
padding: 20px;
border: 1px solid var(--line);
border-radius: 16px
}
.htnj-goal-card p {
margin: 6px 0 0
}
.htnj-faq-section {
background: var(--soft)
}
.htnj-final-cta {
position: relative;
overflow: hidden;
padding: 95px 0;
text-align: center;
background: linear-gradient(135deg, #1b4ed8, #6d42e8);
color: #fff
}
.htnj-final-cta .container {
position: relative;
z-index: 1
}
.htnj-final-cta h2 {
font-size: clamp(2.2rem, 5vw, 4.4rem)
}
.htnj-final-cta p {
color: #e7ecff
}
.htnj-path-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 26px 0
}
.htnj-path-row span {
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .13);
border: 1px solid rgba(255, 255, 255, .2)
}
.htnj-final-btn {
background: #fff;
color: #17326e;
padding: 14px 22px
}
@media(max-width:991px) {
.htnj-hero-inner,  .htnj-split {
grid-template-columns: 1fr
}
.htnj-hero-visual {
min-height: 360px
}
.htnj-intent-strip {
grid-template-columns: repeat(2, 1fr)
}
.htnj-services-grid {
grid-template-columns: 1fr
}
.htnj-five-grid {
grid-template-columns: repeat(2, 1fr)
}
.htnj-core-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:575px) {
.htnj-section {
padding: 68px 0
}
.htnj-haddon-hero {
padding: 85px 0 68px
}
.htnj-hero-copy h1 {
font-size: 2.65rem
}
.htnj-hero-visual {
min-height: 300px
}
.htnj-radar {
width: 250px;
height: 250px
}
.htnj-radar:before {
width: 125px
}
.htnj-radar:after {
height: 250px
}
.htnj-node {
width: 54px;
height: 54px;
border-radius: 15px
}
.htnj-intent-strip,  .htnj-five-grid,  .htnj-core-grid {
grid-template-columns: 1fr
}
.htnj-service-card {
padding: 24px
}
.htnj-clean-list {
columns: 1
}
.htnj-split {
gap: 32px
}
.htnj-market-panel {
padding: 24px
}
}
@media(prefers-reduced-motion:reduce) {
.htnj-page * {
scroll-behavior: auto !important
}
.htnj-radar:before {
animation: none
}
}
.htnj-faq-list {
max-width: 1650px;
margin: auto;
display: grid;
gap: 12px
}
.htnj-faq-item {
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden
}
.htnj-faq-question {
position: relative;
cursor: pointer;
list-style: none;
padding: 20px 58px 20px 22px;
font-weight: 800;
color: var(--ink)
}
.htnj-faq-question::-webkit-details-marker {
display: none
}
.htnj-faq-question:after {
content: "+";
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-size: 1.45rem;
color: var(--blue)
}
.htnj-faq-item[open] .htnj-faq-question {
background: #eef3ff;
color: #173d9d
}
.htnj-faq-item[open] .htnj-faq-question:after {
content: "−"
}
.htnj-faq-answer {
padding: 0 22px 20px;
color: var(--muted)
}