:root{
--batlp-bg: #0a0b0d;
--batlp-bg-panel: #131519;
--batlp-bg-panel-2: #16181d;
--batlp-line: #24272c;
--batlp-line-soft: #1a1c20;
--batlp-text: #f2f1ed;
--batlp-text-dim: #9a9da3;
--batlp-text-faint: #5c5f66;
--batlp-red: #e8382b;
--batlp-red-dim: #7a1d14;
--batlp-green: #3ddc84;
--batlp-radius: 4px;
--batlp-font-display: 'Space Grotesk', sans-serif;
--batlp-font-body: 'Inter', sans-serif;
--batlp-font-mono: 'IBM Plex Mono', monospace;
--batlp-max-width: 1120px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{
scroll-behavior:smooth;
background: #0a0b0d !important;
}
body{
background: #0a0b0d !important;
color: #f2f1ed !important;
font-family: var(--batlp-font-body);
line-height:1.5;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
} .grid-bg{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background-image:
linear-gradient(var(--batlp-line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--batlp-line-soft) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);
opacity:0.5;
}
a{ color:inherit; }
.batlp-container{
max-width: var(--batlp-max-width);
margin:0 auto;
padding: 0 32px;
position:relative;
z-index:1;
}
.eyebrow{
font-family: var(--batlp-font-mono);
font-size: 18px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform:uppercase;
color: var(--batlp-red);
display:flex;
align-items:center;
gap:10px;
}
.eyebrow::before{
content:"";
width:16px;
height:1px;
background: var(--batlp-red);
display:inline-block;
}
h1,h2,h3{
font-family: var(--batlp-font-display);
font-weight:600;
letter-spacing:-0.01em;
color: #f2f1ed !important;
} body.batlp-page h1,
body.batlp-page h2,
body.batlp-page h3{
color: #f2f1ed !important;
}
p{
color: inherit;
}
button, .btn{
font-family: var(--batlp-font-body);
cursor:pointer;
border:none;
outline:none;
font-size:14px;
font-weight:600;
}
button:focus-visible, a:focus-visible, input:focus-visible{
outline: 2px solid var(--batlp-red);
outline-offset: 2px;
} header{
position:sticky;
top:0;
z-index:50;
background: var(--batlp-bg);
border-bottom:1px solid var(--batlp-line-soft);
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding: 16px 32px;
max-width: var(--batlp-max-width);
margin:0 auto;
gap: 20px;
position:relative;
}
.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
flex-shrink:0;
}
.logo-img{
height:48px;
width:auto;
display:block;
}
.custom-logo{
height:48px;
width:auto;
display:block;
}
.nav-right{
display:flex;
align-items:center;
gap:28px;
flex:1;
justify-content:flex-end;
}
.nav-menu{
list-style:none;
display:flex;
align-items:center;
gap:26px;
}
@supports not (gap: 1rem){
.nav-menu li:not(:last-child){
margin-right:26px;
}
}
.nav-menu a{
color: var(--batlp-text);
text-decoration:none;
font-size:14px;
font-weight:500;
opacity:0.82;
transition: color .15s ease, opacity .15s ease;
white-space:nowrap;
}
.nav-menu a:hover{ color: var(--batlp-red); opacity:1; } .more-menu{
position:relative;
flex-shrink:0;
}
.more-menu-toggle{
background:transparent;
border:1px solid var(--batlp-line);
color: var(--batlp-text-dim);
width:36px; height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition: border-color .15s ease, color .15s ease;
}
.more-menu-toggle:hover{
border-color: var(--batlp-text-dim);
color: var(--batlp-text);
}
.more-menu-panel{
position:absolute;
top: calc(100% + 12px);
right:0;
min-width:240px;
background: var(--batlp-bg-panel);
border:1px solid var(--batlp-line);
border-radius: var(--batlp-radius);
padding: 8px;
opacity:0;
visibility:hidden;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
z-index:60;
}
.more-menu-panel.is-open{
opacity:1;
visibility:visible;
transform:none;
}
.more-menu-list{
list-style:none;
}
.more-menu-list a{
display:block;
padding: 10px 14px;
border-radius: 4px;
color: var(--batlp-text);
text-decoration:none;
font-size:14px;
white-space:nowrap;
transition: background .15s ease, color .15s ease;
}
.more-menu-list a:hover{
background: var(--batlp-bg-panel-2);
color: var(--batlp-red);
}
.nav-toggle{
display:none;
background:transparent;
color: var(--batlp-text);
width:36px; height:36px;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.visually-hidden{
position:absolute;
width:1px; height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
}
.logo small{
display:block;
font-family: var(--batlp-font-mono);
font-weight:400;
font-size:9px;
letter-spacing:0.22em;
color: var(--batlp-text-dim);
margin-top:1px;
}
@media (max-width: 860px){
.nav-toggle{ display:flex; }
.nav-right{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background: var(--batlp-bg-panel);
border-bottom:1px solid var(--batlp-line);
flex-direction:column;
align-items:stretch;
gap:18px;
padding: 22px 32px 26px;
}
.nav-right.is-open{ display:flex; }
.nav-menu{
flex-direction:column;
align-items:flex-start;
gap:14px;
} .more-menu-toggle{ display:none; }
.more-menu-panel{
position:static;
opacity:1;
visibility:visible;
transform:none;
background:none;
border:none;
padding:0;
margin-top:4px;
}
.more-menu-list a{ padding:8px 0; }
}
.btn-primary{
background: var(--batlp-red);
color:#fff;
padding: 11px 22px;
border-radius: var(--batlp-radius);
text-decoration:none;
display:inline-block;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
box-shadow: 0 0 0 rgba(232,56,43,0);
}
.btn-primary:hover{
background:#ff4a3a;
box-shadow: 0 4px 24px rgba(232,56,43,0.35);
transform: translateY(-1px);
}
.btn-secondary{
background:transparent;
color: var(--batlp-text);
padding: 11px 22px;
border: 1px solid var(--batlp-line);
border-radius: var(--batlp-radius);
text-decoration:none;
display:inline-block;
transition: border-color .15s ease, background .15s ease;
}
.btn-secondary:hover{
border-color: var(--batlp-text-dim);
background: var(--batlp-bg-panel);
}
.btn-dark{
background:#000;
color: var(--batlp-text);
padding: 11px 22px;
border: 1px solid var(--batlp-line);
border-radius: var(--batlp-radius);
text-decoration:none;
display:inline-block;
transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-dark:hover{
background: var(--batlp-red);
border-color: var(--batlp-red);
box-shadow: 0 4px 24px rgba(232,56,43,0.3);
transform: translateY(-1px);
} .page-hero{
padding: 100px 0 48px;
border-bottom:1px solid var(--batlp-line-soft);
}
.page-hero h1{
font-size: clamp(30px, 4vw, 46px);
line-height:1.1;
}
.page-content-section{
padding: 64px 0 96px;
}
.page-content{
max-width: 74ch;
color: var(--batlp-text-dim);
font-size:16.5px;
line-height:1.75;
}
.page-content h2{
font-size: clamp(22px, 3vw, 28px);
margin: 44px 0 16px;
}
.page-content h2:first-child{ margin-top:0; }
.page-content h3{
font-size:19px;
margin: 32px 0 12px;
}
.page-content p{ margin-bottom:20px; }
.page-content strong{ color: var(--batlp-text); font-weight:600; }
.page-content a{
color: var(--batlp-red);
text-decoration:underline;
text-underline-offset:2px;
}
.page-content a:hover{ color:#ff4a3a; }
.page-content ul, .page-content ol{
margin: 0 0 20px 22px;
}
.page-content li{ margin-bottom:8px; }
.page-content blockquote{
border-left: 2px solid var(--batlp-red);
padding-left:20px;
margin: 28px 0;
color: var(--batlp-text);
font-style:italic;
}
.page-content img{
max-width:100%;
height:auto;
border-radius: var(--batlp-radius);
margin: 12px 0;
display:block;
}
.page-content hr{
border:none;
border-top:1px solid var(--batlp-line-soft);
margin: 40px 0;
} .hero{
position:relative;
padding: 88px 0 70px;
border-bottom:1px solid var(--batlp-line-soft);
}
.hero-grid{
display:grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 48px;
align-items:center;
}
.hero h1{
font-size: clamp(34px, 4.6vw, 54px);
line-height:1.08;
margin: 18px 0 20px;
}
.hero h1 .accent{ color: var(--batlp-red); }
.hero p.lede{
font-size:17px;
color: var(--batlp-text-dim);
max-width: 46ch;
margin-bottom: 32px;
}
.hero-ctas{
display:flex;
gap:14px;
margin-bottom: 34px;
flex-wrap:wrap;
}
.status-line{
display:flex;
align-items:center;
gap:10px;
font-family: var(--batlp-font-mono);
font-size:12px;
color: var(--batlp-text-dim);
letter-spacing:0.04em;
}
.status-dot{
width:7px; height:7px;
border-radius:50%;
background: var(--batlp-green);
box-shadow: 0 0 0 0 rgba(61,220,132,0.6);
animation: pulse-dot 2.2s ease-out infinite;
}
@keyframes pulse-dot{
0%{ box-shadow: 0 0 0 0 rgba(61,220,132,0.55); }
70%{ box-shadow: 0 0 0 7px rgba(61,220,132,0); }
100%{ box-shadow: 0 0 0 0 rgba(61,220,132,0); }
} .pattern-wrap{
position:relative;
aspect-ratio: 1 / 1;
max-width: 460px;
margin: 0 auto;
}
.pattern-wrap svg{ width:100%; height:100%; display:block; }
.ring{ fill:none; stroke: var(--batlp-line); stroke-width:1; }
.ring-label{
font-family: var(--batlp-font-mono);
font-size:8.5px;
fill: var(--batlp-text-faint);
}
.axis-line{ stroke: var(--batlp-line-soft); stroke-width:1; }
.lobe-trace{
fill:none;
stroke: var(--batlp-red);
stroke-width: 2;
filter: drop-shadow(0 0 6px rgba(232,56,43,0.45));
stroke-linejoin: round;
}
.sweep{
transform-origin: 220px 220px;
animation: rotate 6s linear infinite;
}
.sweep line{
stroke: var(--batlp-green);
stroke-width:1.5;
opacity:0.75;
}
.sweep-fade{
transform-origin: 220px 220px;
animation: rotate 6s linear infinite;
}
@keyframes rotate{ to{ transform: rotate(360deg); } }
.center-dot{ fill: var(--batlp-text); }
.deg-label{
font-family: var(--batlp-font-mono);
font-size:9px;
fill: var(--batlp-text-faint);
text-anchor:middle;
} section{
position:relative;
padding: 84px 0;
border-bottom: 1px solid var(--batlp-line-soft);
}
.section-head{
margin-bottom: 44px;
}
.section-title{
font-size: clamp(22px, 3vw, 28px);
margin-top: 14px;
max-width: 30ch;
} .reveal{
opacity:1;
transform:none;
} .vertical-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.v-card{
background: var(--batlp-bg-panel);
border: 1px solid var(--batlp-line);
border-radius: var(--batlp-radius);
padding: 26px 22px;
transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.v-card:hover{
border-color: var(--batlp-red-dim);
background: var(--batlp-bg-panel-2);
transform: translateY(-3px);
}
.v-icon{
width:34px; height:34px;
margin-bottom:18px;
color: var(--batlp-red);
}
.v-card h3{
font-size:16px;
margin-bottom:8px;
font-weight:600;
}
.v-card p{
font-size:13.5px;
color: var(--batlp-text-dim);
line-height:1.55;
} .process-grid{
display:grid;
grid-template-columns: 1fr 1fr;
border:1px solid var(--batlp-line);
border-radius: var(--batlp-radius);
overflow:hidden;
}
.p-cell{
padding: 34px 32px;
border-right:1px solid var(--batlp-line);
border-bottom:1px solid var(--batlp-line);
position:relative;
}
.p-cell:nth-child(2n){ border-right:none; }
.p-cell:nth-child(3), .p-cell:nth-child(4){ border-bottom:none; }
.p-num{
font-family: var(--batlp-font-mono);
font-size:18px;
font-weight: 500;
color: var(--batlp-red);
letter-spacing:0.08em;
display:block;
margin-bottom:14px;
}
.p-cell h3{ font-size:17px; margin-bottom:10px; }
.p-cell p{ color: var(--batlp-text-dim); font-size:14px; max-width:42ch; } .why-grid{
display:grid;
grid-template-columns: repeat(3,1fr);
gap:16px;
}
.why-card{
background: var(--batlp-bg-panel);
border:1px solid var(--batlp-line);
border-left: 2px solid var(--batlp-red);
border-radius: var(--batlp-radius);
padding: 24px 24px 26px;
}
.why-card h3{
font-family: var(--batlp-font-mono);
font-size:12.5px;
letter-spacing:0.08em;
color: var(--batlp-text);
margin-bottom:12px;
text-transform:uppercase;
font-weight:500;
}
.why-card p{
font-size:14px;
color: var(--batlp-text-dim);
line-height:1.6;
}
.why-card p strong{ color: var(--batlp-text); font-weight:600; } .presence-layout{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items:center;
}
.link-diagram{ width:100%; }
.node-card{
background: var(--batlp-bg-panel);
border:1px solid var(--batlp-line);
border-radius: var(--batlp-radius);
padding: 22px 24px;
margin-bottom:14px;
display:flex;
align-items:center;
gap:16px;
}
.node-tag{
font-family: var(--batlp-font-mono);
font-size:12px;
color: var(--batlp-red);
border:1px solid var(--batlp-red-dim);
padding: 5px 9px;
border-radius: 3px;
flex-shrink:0;
}
.node-card h3{ font-size:15.5px; margin-bottom:2px; }
.node-card p{ font-size:13px; color: var(--batlp-text-dim); }
.badge-new{
font-family: var(--batlp-font-mono);
font-size:10px;
background: rgba(61,220,132,0.12);
color: var(--batlp-green);
padding:2px 7px;
border-radius:3px;
margin-left:8px;
letter-spacing:0.05em;
} .cta-section{
text-align:center !important;
padding: 96px 0;
border-bottom:1px solid var(--batlp-line-soft);
}
body.batlp-page .cta-section{
text-align:center !important;
}
.cta-section h2{
font-size: clamp(28px, 4vw, 40px);
margin-bottom:14px;
}
.cta-section p{
color: var(--batlp-text-dim);
max-width: 52ch;
margin: 0 auto 34px;
font-size:15.5px;
}
.cta-form{
display:flex;
gap:10px;
max-width:460px;
margin:0 auto;
flex-wrap:wrap;
justify-content:center;
}
.cta-form label{
position:absolute;
width:1px; height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
}
.cta-form input{
flex:1;
min-width:220px;
background: var(--batlp-bg-panel);
border:1px solid var(--batlp-line);
color: var(--batlp-text);
padding: 13px 16px;
border-radius: var(--batlp-radius);
font-family: var(--batlp-font-body);
font-size:14px;
}
.cta-form input::placeholder{ color: var(--batlp-text-faint); }
.cta-form input:focus{ border-color: var(--batlp-red-dim); outline:none; }
.bat-hp-wrap{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.form-msg{
font-family: var(--batlp-font-mono);
font-size:12px;
color: var(--batlp-green);
margin-top:14px;
min-height:16px;
}
.consult-section{
text-align:center !important;
padding: 64px 0;
border-bottom:1px solid var(--batlp-line-soft);
}
body.batlp-page .consult-section{
text-align:center !important;
}
.consult-section p{
color: var(--batlp-text-dim);
font-size:15px;
margin-bottom:20px;
} footer{ padding: 34px 0 46px; }
.footer-top{
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
padding-bottom: 26px;
border-bottom:1px solid var(--batlp-line-soft);
margin-bottom: 22px;
} .footer-top .logo{
flex:1 1 0;
display:flex;
justify-content:flex-start;
}
.footer-links{
flex:1 1 0;
display:flex;
justify-content:flex-end;
gap:22px;
font-size:13px;
color: var(--batlp-text-dim);
flex-wrap:wrap;
}
.footer-links a{ text-decoration:none; }
.footer-links a:hover{ color: var(--batlp-text); }
.footer-badge-chip{
display:inline-flex;
align-items:center;
flex:0 0 auto;
}
.footer-badge-chip img{
display:block;
height:44px;
width:auto;
}
@media (max-width: 700px){
.footer-top{
flex-direction:column;
align-items:center;
text-align:center;
}
.footer-top .logo{ justify-content:center; }
.footer-links{ justify-content:center; }
}
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:16px;
}
.socials{ display:flex; gap:16px; }
.socials a{
width:32px; height:32px;
border:1px solid var(--batlp-line);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color: var(--batlp-text-dim);
text-decoration:none;
transition: border-color .15s, color .15s;
}
.socials a:hover{ border-color: var(--batlp-red-dim); color: var(--batlp-red); }
.copyright{ font-size:12.5px; color: var(--batlp-text-faint); } @media (max-width: 860px){
.hero-grid{ grid-template-columns:1fr; }
.pattern-wrap{ order:-1; max-width:320px; }
.vertical-grid{ grid-template-columns: repeat(2,1fr); }
.why-grid{ grid-template-columns:1fr; }
.process-grid{ grid-template-columns:1fr; }
.p-cell{ border-right:none !important; border-bottom:1px solid var(--batlp-line); }
.p-cell:last-child{ border-bottom:none; }
.presence-layout{ grid-template-columns:1fr; }
.link-diagram{ order:-1; max-width:320px; margin:0 auto 20px; }
}
@media (max-width: 520px){
.vertical-grid{ grid-template-columns:1fr; }
.nav{ padding:14px 20px; }
.batlp-container{ padding:0 20px; }
}
@media (prefers-reduced-motion: reduce){
.sweep, .sweep-fade, .status-dot, .pulse-travel{ animation:none !important; }
.reveal{ transition:none; opacity:1; transform:none; }
html{ scroll-behavior:auto; }
}