:root {
--midnight:      #010101;
--midnight-soft: #1A1A1A;
--midnight-mid:  #111111;
--mint:          #00FFA3;
--mint-10:       rgba(0,255,163,0.10);
--mint-25:       rgba(0,255,163,0.25);
--white:         #FFFFFF;
--beige:         #E2BC9E;
--beige-10:      rgba(226,188,158,0.10);
--gray-40:       rgba(255,255,255,0.40);
--gray-60:       rgba(255,255,255,0.60);
--gray-subtle:   rgba(255,255,255,0.07);
--font-d: 'Montserrat', sans-serif;
--font-b: 'Inter', sans-serif;
--ease: cubic-bezier(0.22,1,0.36,1);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
background: var(--midnight);
color: var(--white);
font-family: var(--font-b);
font-weight: 400;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
img, svg {
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text, .gallery-caption, .bypostauthor, .alignnone, .aligncenter, .alignright, .alignleft, .sticky {} .wp-block-cover, .wp-block-group { margin-bottom: 0; }
.wp-block-image img { border-radius: 8px; }
.wp-block-separator { border-color: var(--gray-subtle); }
.wp-block-quote { border-left: 3px solid var(--mint); padding-left: 1.5rem; color: var(--gray-60); }
.wp-block-pullquote { border-top: 2px solid var(--mint); border-bottom: 2px solid var(--mint); color: var(--white); }
.wp-block-code { background: var(--midnight-soft); color: var(--mint); border-radius: 8px; }
.wp-block-table { color: var(--gray-60); }
.wp-block-table td { border-color: var(--gray-subtle); } .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.in {
opacity: 1;
transform: none;
}
.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }
.reveal.delay-3 { transition-delay: 0.36s; } @keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin-rev {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes slideLine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
} .nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 5rem;
transition: background 0.45s ease, padding 0.45s ease;
border-bottom: 1px solid transparent;
}
.nav.stuck {
background: rgba(1, 1, 1, 0.93);
backdrop-filter: blur(16px);
padding: 0.8rem 5rem;
border-color: var(--gray-subtle);
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.85rem;
}
.nav-links {
display: flex;
gap: 2.5rem;
align-items: center;
}
.nav-links a,
.nav-links li a {
font-family: var(--font-d);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gray-60);
transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links li a:hover {
color: var(--mint);
}
.nav-pill {
font-family: var(--font-d);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--mint);
color: var(--midnight);
padding: 0.65rem 1.5rem;
transition: background 0.25s ease;
display: inline-block;
}
.nav-pill:hover {
background: var(--beige);
color: var(--midnight);
} .nav-links ul {
display: flex;
gap: 2.5rem;
align-items: center;
}
.nav-links li {
position: relative;
}
.nav-links li.menu-item-has-children::after {
content: '\25BE';
color: var(--gray-60);
font-size: 0.6rem;
margin-left: 4px;
}
.nav-links .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--midnight-soft);
border: 1px solid var(--gray-subtle);
padding: 0.5rem 0;
min-width: 180px;
z-index: 300;
}
.nav-links li:hover .sub-menu {
display: block;
}
.nav-links .sub-menu a {
padding: 0.5rem 1.2rem;
display: block;
white-space: nowrap;
} .hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 9rem 4rem 5rem 5rem;
position: relative;
z-index: 2;
}
.eyebrow {
font-family: var(--font-d);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--mint);
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 2rem;
}
.eyebrow::before {
content: '';
display: block;
width: 2rem;
height: 1px;
background: var(--mint);
}
.hero-h1 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(2.4rem, 4.2vw, 3.8rem);
line-height: 1.04;
letter-spacing: -0.025em;
margin-bottom: 2rem;
}
.hero-h1 .struck {
position: relative;
display: inline-block;
color: rgba(255, 255, 255, 0.3);
}
.hero-h1 .struck::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
background: var(--mint);
transform: translateY(-50%);
}
.hero-h1 .hi {
color: var(--mint);
}
.hero-lead {
font-size: 0.95rem;
font-weight: 300;
line-height: 1.9;
color: var(--gray-60);
max-width: 480px;
margin-bottom: 3rem;
}
.cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.btn-mint {
font-family: var(--font-d);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--mint);
color: var(--midnight);
padding: 1rem 2.1rem;
display: inline-block;
border: 2px solid var(--mint);
transition: background 0.25s ease, color 0.25s ease;
cursor: pointer;
}
.btn-mint:hover {
background: transparent;
color: var(--mint);
}
.btn-ghost {
font-family: var(--font-d);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gray-60);
padding: 1rem 2.1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
transition: border-color 0.25s ease, color 0.25s ease;
}
.btn-ghost:hover {
border-color: var(--beige);
color: var(--beige);
}
.hero-scroll {
position: absolute;
bottom: 2.5rem;
left: 5rem;
display: flex;
align-items: center;
gap: 0.85rem;
font-family: var(--font-d);
font-size: 0.58rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
}
.scroll-track {
width: 42px;
height: 1px;
background: rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.scroll-track::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--mint);
animation: slideLine 2.2s ease-in-out infinite;
} .hero-visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.loop-stage {
position: relative;
width: 480px;
height: 480px;
}
.loop-glow {
position: absolute;
inset: -20%;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 255, 163, 0.05) 0%, transparent 65%);
pointer-events: none;
}
.ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(0, 255, 163, 0.45);
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.ring::before {
content: '';
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mint);
top: -3.5px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 12px var(--mint);
}
.ring-1 {
width: 100%;
height: 100%;
animation: spin-slow 22s linear infinite;
}
.ring-2 {
width: calc(100% - 88px);
height: calc(100% - 88px);
border-color: rgba(226, 188, 158, 0.35);
animation: spin-rev 32s linear infinite;
}
.ring-2::before {
background: var(--beige);
box-shadow: 0 0 10px var(--beige);
}
.ring-3 {
width: calc(100% - 176px);
height: calc(100% - 176px);
border: 1px dashed rgba(0, 255, 163, 0.2);
animation: spin-slow 16s linear infinite;
}
.ring-3::before {
width: 5px;
height: 5px;
top: -2.5px;
background: rgba(0, 255, 163, 0.8);
box-shadow: 0 0 8px rgba(0, 255, 163, 0.6);
}
.ring-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.ring-center-sub {
font-family: var(--font-d);
font-size: 0.5rem;
letter-spacing: 0.38em;
text-transform: uppercase;
color: rgba(0, 255, 163, 0.7);
}
.dot-marker {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mint);
top: 50%;
left: 50%;
animation: pulse-dot 3s ease-in-out infinite;
} .ticker {
background: var(--midnight-soft);
border-top: 1px solid var(--gray-subtle);
border-bottom: 1px solid var(--gray-subtle);
padding: 0.85rem 0;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.ticker-track {
display: inline-flex;
white-space: nowrap;
animation: marqueeScroll 28s linear infinite;
width: max-content;
}
.ticker-item {
font-family: var(--font-d);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.25);
padding: 0 2.5rem;
display: inline-block;
}
.ticker-item span {
color: var(--mint);
margin: 0 4px;
} .problem {
background: var(--midnight-soft);
padding: 8rem 5rem;
position: relative;
}
.problem::before,
.problem::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--mint) 30%, var(--mint) 70%, transparent 100%);
opacity: 0.4;
}
.problem::before { top: 0; }
.problem::after { bottom: 0; }
.problem-inner {
max-width: 1100px;
margin: 0 auto;
position: relative;
}
.problem-h2 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(2rem, 4vw, 3.6rem);
margin-bottom: 3.5rem;
}
.problem-h2 em {
font-style: normal;
color: var(--beige);
}
.problem-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.problem-p {
font-size: 1rem;
line-height: 1.9;
font-weight: 300;
color: var(--gray-60);
}
.problem-ghost {
position: absolute;
right: -1rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(8rem, 16vw, 14rem);
color: rgba(255, 255, 255, 0.025);
pointer-events: none;
} .system {
background: var(--midnight);
padding: 8rem 5rem;
}
.system-header {
max-width: 620px;
margin-bottom: 5rem;
}
.system-h2 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(1.8rem, 3vw, 2.6rem);
margin-bottom: 0.75rem;
}
.system-lead {
font-size: 0.95rem;
font-weight: 300;
color: var(--gray-40);
}
.system-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--gray-subtle);
}
.sys-col {
padding: 3.5rem 3rem;
border-right: 1px solid var(--gray-subtle);
position: relative;
transition: background 0.35s;
}
.sys-col:last-child {
border-right: none;
}
.sys-col:hover {
background: rgba(0, 255, 163, 0.02);
}
.sys-num {
font-family: var(--font-d);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--mint);
display: block;
margin-bottom: 1.5rem;
}
.sys-h3 {
font-family: var(--font-d);
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 1.5rem;
}
.sys-body {
font-size: 0.88rem;
line-height: 1.85;
color: rgba(255, 255, 255, 0.5);
}
.sys-arrow {
position: absolute;
bottom: 2.5rem;
right: 2.5rem;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(0, 255, 163, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.sys-arrow svg {
width: 12px;
height: 12px;
stroke: rgba(0, 255, 163, 0.6);
}
.sys-col:hover .sys-arrow {
border-color: var(--mint);
background: var(--mint-10);
} .pricing {
background: var(--midnight-soft);
padding: 8rem 5rem;
}
.pricing-head {
text-align: center;
margin-bottom: 5rem;
}
.pricing-h2 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(1.8rem, 3vw, 2.6rem);
margin-bottom: 0.75rem;
}
.pricing-sub {
font-size: 0.95rem;
font-weight: 300;
color: var(--gray-40);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 860px;
margin: 0 auto;
}
.tier-card {
background: var(--midnight);
border: 1px solid var(--gray-subtle);
padding: 3rem;
position: relative;
transition: border-color 0.3s ease;
}
.tier-card.featured {
border: 2px solid var(--mint);
box-shadow: 0 0 50px rgba(0, 255, 163, 0.07);
}
.tier-badge {
position: absolute;
top: -1px;
right: 2rem;
background: var(--mint);
color: var(--midnight);
font-family: var(--font-d);
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.2em;
padding: 0.3rem 0.9rem;
}
.tier-label {
font-family: var(--font-d);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.28em;
color: var(--beige);
margin-bottom: 1.25rem;
}
.tier-name {
font-family: var(--font-d);
font-weight: 900;
font-size: 1.45rem;
margin-bottom: 0.5rem;
}
.tier-price {
font-family: var(--font-d);
font-weight: 700;
font-size: 2.8rem;
}
.tier-price span {
font-size: 0.9rem;
font-weight: 300;
color: var(--gray-40);
}
.tier-divider {
width: 100%;
height: 1px;
background: var(--gray-subtle);
margin: 2rem 0;
}
.tier-features {
margin-bottom: 2.5rem;
}
.tier-features li {
display: flex;
gap: 1rem;
align-items: center;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.65);
padding: 0.65rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tier-features li:last-child {
border-bottom: none;
}
.check {
color: var(--mint);
} .verify {
background: var(--midnight);
padding: 8rem 5rem;
}
.verify-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7rem;
align-items: center;
}
.verify-h2 span {
color: var(--mint);
}
.metrics {
display: flex;
gap: 3rem;
margin-top: 2rem;
}
.metric-num {
font-weight: 900;
font-size: 2.1rem;
}
.metric-num sup {
color: var(--mint);
font-size: 1.2rem;
}
.metric-label {
font-size: 0.72rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.38);
}
.verify-ring-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.verify-stage {
position: relative;
width: 340px;
height: 340px;
}
.v-ring {
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.v-ring::before {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mint);
top: -3px;
left: 50%;
transform: translateX(-50%);
}
.v-r1 {
width: 100%;
height: 100%;
border: 1px solid rgba(0, 255, 163, 0.25);
animation: spin-slow 20s linear infinite;
}
.v-r2 {
width: calc(100% - 100px);
height: calc(100% - 100px);
border: 1px solid rgba(226, 188, 158, 0.2);
animation: spin-rev 28s linear infinite;
}
.v-r2::before {
background: var(--beige);
}
.v-r3 {
width: calc(100% - 200px);
height: calc(100% - 200px);
border: 1px dashed rgba(0, 255, 163, 0.12);
animation: spin-slow 14s linear infinite;
}
.v-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.v-badge {
font-size: 0.5rem;
letter-spacing: 0.3em;
color: rgba(0, 255, 163, 0.7);
margin-top: 8px;
} .content-form-section {
background: linear-gradient(0deg, var(--midnight-soft) 0%, var(--midnight) 100%);
padding: 6rem 5rem;
border-top: 1px solid var(--gray-subtle);
border-bottom: 1px solid var(--gray-subtle);
}
.form-container {
max-width: 760px;
margin: 0 auto;
background: rgba(1, 1, 1, 0.65);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 255, 163, 0.2);
border-radius: 32px;
padding: 3rem;
box-shadow: 0 25px 45px -15px rgba(0, 0, 0, 0.5);
}
.form-header {
text-align: center;
margin-bottom: 2.5rem;
}
.form-header h3 {
font-family: var(--font-d);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: var(--white);
}
.form-header p {
font-size: 0.85rem;
color: var(--gray-40);
margin-top: 0.5rem;
}
.form-group {
margin-bottom: 1.6rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
padding: 1rem 1.5rem;
font-family: var(--font-b);
font-size: 0.9rem;
color: var(--white);
transition: all 0.25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--mint);
background: rgba(0, 255, 163, 0.02);
box-shadow: 0 0 0 2px rgba(0, 255, 163, 0.1);
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.form-group select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300FFA3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.2rem center;
background-size: 12px;
}
.form-group select option {
background: #1A1A1A;
color: #fff;
}
.submit-btn {
width: 100%;
background: var(--mint);
border: none;
padding: 1rem;
font-family: var(--font-d);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 0.7rem;
color: var(--midnight);
border-radius: 40px;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
margin-top: 0.8rem;
}
.submit-btn:hover {
background: var(--beige);
transform: translateY(-2px);
}
.form-note {
text-align: center;
margin-top: 1.2rem;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.28);
} .back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 48px;
height: 48px;
background: var(--mint);
border-radius: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 300;
opacity: 0;
visibility: hidden;
transition: all 0.3s var(--ease);
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--beige);
transform: translateY(-5px);
}
.back-to-top svg {
width: 24px;
height: 24px;
stroke: #010101;
stroke-width: 2;
} .footer {
background: var(--midnight-soft);
padding: 5rem 5rem 3rem;
border-top: 1px solid var(--gray-subtle);
}
.footer-top {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid var(--gray-subtle);
margin-bottom: 2.5rem;
}
.footer-brand-name {
font-family: var(--font-d);
font-weight: 900;
font-size: 1.1rem;
letter-spacing: 0.22em;
}
.footer-brand-sub {
font-size: 0.52rem;
letter-spacing: 0.32em;
color: var(--beige);
margin-bottom: 1.25rem;
}
.footer-desc {
font-size: 0.83rem;
color: rgba(255, 255, 255, 0.32);
line-height: 1.8;
max-width: 260px;
}
.footer-col-title {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.24em;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 1.5rem;
}
.footer-col-links a {
font-size: 0.85rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s;
display: inline-block;
margin-bottom: 0.8rem;
}
.footer-col-links a:hover {
color: var(--beige);
}
.footer-bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copy {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.22);
}
.footer-copy em {
color: var(--mint);
}
.footer-legal {
display: flex;
gap: 2rem;
}
.footer-legal a {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.2);
transition: color 0.22s ease;
}
.footer-legal a:hover {
color: var(--gray-60);
} .blog-header {
padding: 10rem 5rem 4rem;
text-align: center;
}
.blog-header h1 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(2rem, 3.5vw, 3rem);
margin-bottom: 0.75rem;
}
.blog-header p {
color: var(--gray-40);
font-size: 0.95rem;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 2rem;
padding: 0 5rem 6rem;
max-width: 1280px;
margin: 0 auto;
}
.blog-card {
background: var(--midnight-soft);
border: 1px solid var(--gray-subtle);
overflow: hidden;
transition: border-color 0.3s ease;
}
.blog-card:hover {
border-color: var(--mint-25);
}
.blog-card-thumb {
width: 100%;
aspect-ratio: 16/10;
overflow: hidden;
}
.blog-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-thumb img {
transform: scale(1.05);
}
.blog-card-body {
padding: 2rem;
}
.blog-card-cat {
font-family: var(--font-d);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--mint);
text-transform: uppercase;
margin-bottom: 0.75rem;
display: block;
}
.blog-card-title {
font-family: var(--font-d);
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 0.75rem;
line-height: 1.3;
}
.blog-card-title a {
color: var(--white);
transition: color 0.2s;
}
.blog-card-title a:hover {
color: var(--mint);
}
.blog-card-excerpt {
font-size: 0.85rem;
color: var(--gray-60);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.blog-card-meta {
font-size: 0.7rem;
color: var(--gray-40);
display: flex;
gap: 1rem;
}
.blog-card-meta span em {
color: var(--beige);
font-style: normal;
} .single-header {
padding: 10rem 5rem 3rem;
max-width: 800px;
margin: 0 auto;
}
.single-header .cat-links {
font-family: var(--font-d);
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--mint);
text-transform: uppercase;
margin-bottom: 1rem;
display: block;
}
.single-header .cat-links a {
color: var(--mint);
}
.single-header h1 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
line-height: 1.08;
margin-bottom: 1.5rem;
}
.single-meta {
display: flex;
gap: 1.5rem;
color: var(--gray-40);
font-size: 0.78rem;
}
.single-meta em {
color: var(--beige);
font-style: normal;
}
.single-feat-img {
margin: 2rem 5rem 3rem;
border-radius: 12px;
overflow: hidden;
max-height: 500px;
}
.single-feat-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-content {
max-width: 740px;
margin: 0 auto;
padding: 0 5rem 6rem;
font-size: 1.05rem;
line-height: 1.9;
color: var(--gray-60);
}
.single-content h1, .single-content h2, .single-content h3,
.single-content h4, .single-content h5, .single-content h6 {
font-family: var(--font-d);
color: var(--white);
margin-top: 2.5rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.single-content h2 { font-size: 1.8rem; }
.single-content h3 { font-size: 1.4rem; }
.single-content p {
margin-bottom: 1.5rem;
}
.single-content a {
color: var(--mint);
text-decoration: underline;
}
.single-content a:hover {
color: var(--beige);
}
.single-content ul, .single-content ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.single-content li {
margin-bottom: 0.5rem;
}
.single-content ul { list-style: disc; }
.single-content ol { list-style: decimal; }
.single-content img {
border-radius: 8px;
margin: 2rem auto;
}
.single-content blockquote {
border-left: 3px solid var(--mint);
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
color: var(--gray-40);
}
.single-nav {
display: flex;
justify-content: space-between;
max-width: 740px;
margin: 0 auto;
padding: 2rem 5rem 4rem;
border-top: 1px solid var(--gray-subtle);
}
.single-nav a {
font-family: var(--font-d);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gray-60);
transition: color 0.2s;
}
.single-nav a:hover {
color: var(--mint);
} .sidebar {
padding: 2rem;
}
.sidebar .widget {
margin-bottom: 2.5rem;
}
.sidebar .widget-title {
font-family: var(--font-d);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mint);
margin-bottom: 1.25rem;
}
.sidebar ul li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--gray-subtle);
}
.sidebar ul li a {
color: var(--gray-60);
font-size: 0.85rem;
transition: color 0.2s;
}
.sidebar ul li a:hover {
color: var(--beige);
} .pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 2rem 5rem 4rem;
}
.pagination a, .pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--gray-subtle);
font-size: 0.8rem;
color: var(--gray-60);
transition: all 0.2s;
}
.pagination a:hover {
border-color: var(--mint);
color: var(--mint);
}
.pagination span.current {
background: var(--mint);
color: var(--midnight);
border-color: var(--mint);
} .page-404, .search-no-results {
text-align: center;
padding: 10rem 5rem;
}
.page-404 h1 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(4rem, 8vw, 7rem);
color: var(--mint);
margin-bottom: 1rem;
}
.page-404 p, .search-no-results p {
color: var(--gray-60);
font-size: 1.05rem;
margin-bottom: 2rem;
} .page-content {
max-width: 800px;
margin: 0 auto;
padding: 10rem 5rem 6rem;
}
.page-content h1 {
font-family: var(--font-d);
font-weight: 900;
font-size: clamp(2rem, 3.5vw, 2.8rem);
margin-bottom: 2rem;
}
.page-content .entry-content {
font-size: 1rem;
line-height: 1.9;
color: var(--gray-60);
}
.page-content .entry-content h2, .page-content .entry-content h3 {
font-family: var(--font-d);
color: var(--white);
margin-top: 2rem;
margin-bottom: 1rem;
}
.page-content .entry-content a {
color: var(--mint);
text-decoration: underline;
}
.page-content .entry-content ul, .page-content .entry-content ol {
padding-left: 1.5rem;
margin-bottom: 1.5rem;
}
.page-content .entry-content ul { list-style: disc; }
.page-content .entry-content ol { list-style: decimal; } .comments-area {
max-width: 740px;
margin: 0 auto;
padding: 3rem 5rem 5rem;
border-top: 1px solid var(--gray-subtle);
}
.comments-title {
font-family: var(--font-d);
font-size: 1.1rem;
color: var(--white);
margin-bottom: 2rem;
}
.comment-list {
margin-bottom: 3rem;
}
.comment {
padding: 1.5rem 0;
border-bottom: 1px solid var(--gray-subtle);
}
.comment-meta {
font-size: 0.8rem;
color: var(--gray-40);
margin-bottom: 0.75rem;
}
.comment-meta .fn { color: var(--beige); }
.comment-content {
font-size: 0.9rem;
color: var(--gray-60);
line-height: 1.7;
}
.comment-reply-link {
font-size: 0.7rem;
color: var(--mint);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.comment-respond {
margin-top: 2rem;
}
.comment-reply-title {
font-family: var(--font-d);
font-size: 1rem;
color: var(--white);
margin-bottom: 1.5rem;
}
.comment-form input, .comment-form textarea {
width: 100%;
background: rgba(255,255,255,0.03);
border: 1px solid var(--gray-subtle);
border-radius: 12px;
padding: 0.8rem 1.2rem;
font-family: var(--font-b);
font-size: 0.9rem;
color: var(--white);
margin-bottom: 1rem;
}
.comment-form input:focus, .comment-form textarea:focus {
outline: none;
border-color: var(--mint);
}
.comment-form textarea { min-height: 120px; }
.form-submit .submit {
background: var(--mint);
color: var(--midnight);
border: none;
padding: 0.8rem 2rem;
font-family: var(--font-d);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.65rem;
cursor: pointer;
border-radius: 40px;
} .hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 6px;
z-index: 260;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--gray-60);
border-radius: 2px;
transition: all 0.3s var(--ease);
transform-origin: center;
}
.hamburger.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.hamburger:hover span {
background: var(--mint);
} .mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 250;
background: rgba(1, 1, 1, 0.97);
backdrop-filter: blur(16px);
padding: 6rem 2rem 2rem;
overflow-y: auto;
visibility: hidden;
opacity: 0;
transition: visibility 0.35s var(--ease), opacity 0.35s var(--ease);
}
.mobile-menu.open {
display: block;
visibility: visible;
opacity: 1;
}
@media (min-width: 901px) {
.mobile-menu { display: none !important; }
}
.mobile-close {
position: absolute;
top: 1.2rem;
right: 1.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--gray-subtle);
background: none;
color: var(--gray-60);
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
}
.mobile-close:hover {
border-color: var(--mint);
color: var(--mint);
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.mobile-nav-links a {
font-family: var(--font-d);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--gray-60);
padding: 0.8rem 0;
transition: color 0.2s;
display: block;
text-align: center;
}
.mobile-nav-links a:hover {
color: var(--mint);
}
.mobile-cta {
margin-top: 1.5rem;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
background: var(--mint);
color: var(--midnight) !important;
padding: 0.8rem 2rem !important;
display: inline-block !important;
width: auto;
} .footer-bottom-left {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-social {
display: flex;
gap: 0.85rem;
}
.social-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--gray-subtle);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
color: var(--gray-40);
}
.social-icon svg {
width: 16px;
height: 16px;
}
.social-icon:hover {
border-color: var(--mint);
color: var(--mint);
background: var(--mint-10);
} @media (max-width: 1100px) {
.nav, .nav.stuck { padding-left: 3rem; padding-right: 3rem; }
.hero-content { padding: 9rem 3rem 5rem 3rem; }
.hero-scroll { left: 3rem; }
.problem, .system, .pricing, .verify, .content-form-section { padding-left: 3rem; padding-right: 3rem; }
}
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; min-height: 130vh; }
.hero-visual { display: none; }
.mobile-menu { display: block; }
.hamburger { display: flex; }
.nav-links, .nav-links ul { display: none; }
.nav-links .sub-menu { display: none; }
.nav-pill { display: none; }
.system-grid { grid-template-columns: 1fr; }
.sys-col { border-right: none; border-bottom: 1px solid var(--gray-subtle); }
.sys-col:last-child { border-bottom: none; }
.pricing-grid { grid-template-columns: 1fr; }
.verify-inner { grid-template-columns: 1fr; gap: 4rem; }
.verify-ring-wrap { display: none; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 3rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer-legal { flex-wrap: wrap; gap: 1.5rem; }
.problem-cols { grid-template-columns: 1fr; }
.blog-grid { grid-template-columns: 1fr; padding-left: 3rem; padding-right: 3rem; }
.single-content, .single-header { padding-left: 3rem; padding-right: 3rem; }
.single-feat-img { margin-left: 3rem; margin-right: 3rem; }
}
@media (max-width: 600px) {
.nav, .nav.stuck { padding-left: 1.5rem; padding-right: 1.5rem; }
.hero-content { padding: 7rem 1.5rem 2rem; }
.hero-scroll { left: 1.5rem; bottom: 1.2rem; }
.problem, .system, .pricing, .verify, .content-form-section { padding: 4rem 1.5rem; }
.form-container { padding: 2rem 1.5rem; }
.footer { padding: 3rem 1.5rem 2rem; }
.footer-top { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer-legal { flex-wrap: wrap; gap: 1.2rem; }
.metrics { gap: 1.5rem; flex-wrap: wrap; }
.back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
.blog-grid { padding-left: 1.5rem; padding-right: 1.5rem; }
.single-content, .single-header, .single-nav { padding-left: 1.5rem; padding-right: 1.5rem; }
.single-feat-img { margin-left: 1.5rem; margin-right: 1.5rem; }
.page-content { padding: 7rem 1.5rem 4rem; }
.page-404, .search-no-results { padding: 7rem 1.5rem; }
.blog-header { padding: 7rem 1.5rem 3rem; }
.comments-area { padding: 2rem 1.5rem; }
.mobile-nav-links a { font-size: 0.95rem; }
} .modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(1, 1, 1, 0.85);
backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
padding: 2rem;
}
.modal-overlay.active {
display: flex;
}
.modal-box {
background: var(--midnight-soft);
border: 1px solid var(--mint-25);
border-radius: 32px;
padding: 3rem;
max-width: 480px;
width: 100%;
text-align: center;
position: relative;
box-shadow: 0 0 60px rgba(0, 255, 163, 0.08);
animation: modalFadeIn 0.4s var(--ease);
}
@keyframes modalFadeIn {
0% { opacity: 0; transform: scale(0.92) translateY(20px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
position: absolute;
top: 1.2rem;
right: 1.2rem;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--gray-subtle);
background: none;
color: var(--gray-40);
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.modal-close:hover {
border-color: var(--beige);
color: var(--beige);
}
.modal-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: var(--mint-10);
border: 2px solid var(--mint);
display: flex;
align-items: center;
justify-content: center;
}
.modal-icon svg {
width: 28px;
height: 28px;
stroke: var(--mint);
stroke-width: 2.5;
fill: none;
}
.modal-box h3 {
font-family: var(--font-d);
font-weight: 700;
font-size: 1.3rem;
color: var(--white);
margin-bottom: 0.75rem;
}
.modal-box p {
font-size: 0.9rem;
color: var(--gray-40);
line-height: 1.7;
margin-bottom: 2rem;
}
.modal-btn {
font-family: var(--font-d);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--mint);
color: var(--midnight);
padding: 0.85rem 2rem;
border: none;
border-radius: 40px;
cursor: pointer;
transition: background 0.2s;
}
.modal-btn:hover {
background: var(--beige);
}
.modal-box.error .modal-icon {
border-color: var(--beige);
background: var(--beige-10);
}
.modal-box.error .modal-icon svg {
stroke: var(--beige);
}
.modal-box.error .modal-btn {
background: var(--beige);
}