/* ============================================================
AML-Pilot — Argenify (PayStruct) Design System
------------------------------------------------------------
Tokens & fonts in tokens.css (imported below).
Light-only. Geist body,Instrument Serif italic accent.
============================================================ */
@import url('./tokens.91f1e3ce.css');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img,svg{display:block;max-width:100%;}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;}
/* body styles come from tokens.css (already in:root). We extend
here only with role-defaults that tokens.css doesn't set on raw
h1/h2/h3 (it defines .t-display/.t-h1/… classes instead). */
h1,h2,h3,h4,h5,h6{
font-family:var(--sans);
font-weight:600;
color:var(--fg);
text-wrap:balance;
}
h1{letter-spacing:var(--ls-display);line-height:var(--lh-tight);}
h2{letter-spacing:var(--ls-h2);line-height:var(--lh-snug);}
h3{letter-spacing:var(--ls-h3);}
h4{letter-spacing:var(--ls-h4);}
p{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);}
strong{font-weight:600;color:var(--fg);}
code,kbd,samp{
font-family:var(--mono);
font-size:0.92em;
font-feature-settings:"calt" 0,"liga" 0;
}
:root{
--max-content:1280px;
}
.container{
max-width:var(--max-content);
margin:0 auto;
padding:0 48px;
}
@media (max-width:940px){
.container{padding:0 20px;}
}
main{display:block;}
.external-link::after{
content:"";
display:inline-block;
width:0.6em;
height:0.6em;
margin-left:0.25em;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center / contain;
opacity:0.6;
vertical-align:middle;
}
a.external-link:hover::after{opacity:1;color:var(--accent);}
.site-header{
position:sticky;
top:0;
z-index:50;
background:color-mix(in oklab,var(--bg) 78%,transparent);
backdrop-filter:blur(20px) saturate(140%);
-webkit-backdrop-filter:blur(20px) saturate(140%);
border-bottom:1px solid var(--border);
transition:border-color var(--dur-fast) var(--ease-out);
}
.site-header.scrolled{border-bottom-color:var(--border-strong);}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 48px;
}
.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
letter-spacing:-0.01em;
font-size:16px;
cursor:pointer;
color:var(--fg);
}
.brand:hover{color:var(--fg);}
.brand-mark{
width:26px;
height:26px;
border-radius:7px;
background:var(--accent);
display:grid;
place-items:center;
color:var(--accent-ink);
font-family:var(--mono);
font-weight:700;
font-size:13px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 6px 18px -6px var(--accent);
}
.main-nav{
display:flex;
gap:24px;
align-items:center;
}
.main-nav a{
color:var(--fg-muted);
font-size:14px;
transition:color var(--dur-fast) var(--ease-out);
}
.main-nav a:hover{color:var(--fg);}
.nav-toggle{
display:none;
width:36px;
height:36px;
border-radius:8px;
flex-direction:column;
justify-content:center;
align-items:center;
gap:4px;
padding:0;
}
.nav-toggle span{
display:block;
width:18px;
height:1.5px;
background:var(--fg);
border-radius:1px;
transition:opacity var(--dur-fast),transform var(--dur-fast);
}
@media (max-width:940px){
.header-inner{padding:12px 18px;}
.nav-toggle{display:flex;}
.main-nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
flex-direction:column;
gap:0;
background:var(--bg-elev);
border-bottom:1px solid var(--border);
padding:12px 18px 20px;
}
.main-nav.open{display:flex;}
.main-nav a{
padding:10px 0;
border-top:1px dashed var(--border);
font-size:15px;
}
.main-nav a:first-child{border-top:0;}
}
.site-footer{
background:var(--bg);
color:var(--fg-dim);
border-top:1px dashed var(--border);
margin-top:64px;
padding:56px 0 40px;
font-size:13px;
}
.site-footer .container{
display:flex;
flex-direction:column;
gap:40px;
}
.footer-top{
display:flex;
flex-direction:column;
gap:12px;
max-width:520px;
}
.footer-brand{
display:inline-flex;
align-items:center;
gap:10px;
color:var(--fg);
font-weight:600;
font-size:16px;
letter-spacing:-0.01em;
}
.footer-tagline{
color:var(--fg-muted);
font-size:14px;
line-height:1.5;
text-wrap:pretty;
}
.footer-cols{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:32px;
}
.footer-col h4{
font-family:var(--mono);
font-size:11px;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--fg-dim);
font-weight:500;
margin-bottom:14px;
}
.footer-col a{
display:block;
color:var(--fg-muted);
font-size:13px;
padding:4px 0;
transition:color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover{color:var(--fg);}
.footer-bottom{
border-top:1px dashed var(--border);
padding-top:24px;
font-family:var(--mono);
font-size:12px;
color:var(--fg-dim);
}
@media (max-width:940px){
.footer-cols{grid-template-columns:repeat(2,1fr);gap:28px 24px;}
}
@media (max-width:560px){
.footer-cols{grid-template-columns:1fr;gap:24px;}
}
.btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:9px;
font-size:14px;
font-weight:500;
border:1px solid var(--border);
background:transparent;
color:var(--fg);
white-space:nowrap;
transition:
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
text-decoration:none;
cursor:pointer;
}
.btn:hover{
background:var(--accent-soft-2);
border-color:var(--accent-soft-2);
color:var(--accent);
}
.btn-primary{
background:var(--accent);
color:var(--accent-ink);
border-color:transparent;
font-weight:600;
box-shadow:
0 0 0 1px rgba(0,0,0,0.04) inset,
0 6px 22px -10px var(--accent);
}
.btn-primary:hover{
background:var(--accent-soft-2);
color:var(--accent);
border-color:var(--accent-soft-2);
box-shadow:
0 0 0 1px var(--accent-soft-2) inset,
0 6px 22px -12px var(--accent);
transform:translateY(-1px);
}
.btn-outline{}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px;}
.btn-lg{padding:12px 22px;font-size:15px;border-radius:10px;}
main > section{
padding:80px 0;
border-top:1px dashed var(--border);
}
main > section:first-child{border-top:0;}
main > section > .container > h2,
main > section > .container > .info-block > h2{
font-size:clamp(32px,4.4vw,52px);
line-height:1.02;
letter-spacing:-0.025em;
font-weight:600;
margin:0 0 14px;
max-width:760px;
}
main > section > .container > h3{
font-size:var(--t-h3);
letter-spacing:var(--ls-h3);
margin-bottom:12px;
}
main > section > .container > p,
main > section > .container > .info-block > p{
font-size:17px;
color:var(--fg-muted);
max-width:720px;
margin-bottom:32px;
line-height:1.55;
}
main > section > .container > p:last-child,
main > section > .container > .info-block > p:last-child{margin-bottom:0;}
.eyebrow{
font-family:var(--mono);
font-size:11px;
color:var(--accent);
letter-spacing:0.08em;
text-transform:uppercase;
margin-bottom:14px;
display:inline-flex;
align-items:center;
gap:8px;
}
.sub-hero{
padding:96px 0 56px;
border-top:0;
}
.sub-hero h1{
font-size:clamp(40px,5.2vw,68px);
line-height:1.02;
letter-spacing:-0.03em;
font-weight:600;
margin-bottom:18px;
max-width:880px;
}
.sub-hero p{
font-size:19px;
color:var(--fg-muted);
max-width:640px;
line-height:1.5;
}
.sub-hero-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;}
.cta-section{
padding:80px 0;
}
.cta-section .container{text-align:center;}
.cta-section h2{margin-left:auto;margin-right:auto;}
.cta-section .btn,
.cta-section .btn-primary{margin:8px 6px 0;}
.subtitle{
font-family:var(--mono);
font-size:12.5px;
color:var(--fg-dim);
letter-spacing:0.04em;
text-transform:uppercase;
margin-top:-4px;
margin-bottom:24px;
}
.module-card,
.claim-card,
.step-card,
.audience-item,
.security-item,
.info-block,
.teaser-point{
background:var(--bg-elev);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:28px 24px;
box-shadow:
0 24px 60px -28px rgba(0,0,0,0.6),
0 0 0 1px var(--border) inset;
display:flex;
flex-direction:column;
gap:14px;
}
.module-card h3,
.claim-card h3,
.step-card h3,
.audience-item h3,
.security-item h3,
.info-block h3{
font-size:var(--t-h3);
letter-spacing:var(--ls-h3);
margin:0;
font-weight:600;
}
.module-card p,
.claim-card p,
.step-card p,
.audience-item p,
.security-item p,
.info-block p{
margin:0;
color:var(--fg-muted);
font-size:14.5px;
line-height:1.5;
}
.module-card ul,
.claim-card ul,
.step-card ul,
.info-block ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:8px;
font-size:14.5px;
color:var(--fg);
}
.module-card li,
.claim-card li,
.step-card li,
.info-block li{
position:relative;
padding-left:18px;
}
.module-card li::before,
.claim-card li::before,
.step-card li::before,
.info-block li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:var(--accent);
font-family:var(--mono);
font-weight:600;
}
.card-link{
margin-top:auto;
font-family:var(--mono);
font-size:12.5px;
color:var(--accent);
letter-spacing:0.02em;
display:inline-flex;
align-items:center;
gap:6px;
}
.card-link::after{content:"→";transition:transform var(--dur-fast);}
.card-link:hover::after{transform:translateX(2px);}
.module-grid,
.claims-grid,
.steps-grid,
.audience-grid,
.security-grid,
.teaser-points{
display:grid;
gap:18px;
margin-top:32px;
}
.module-grid{grid-template-columns:repeat(3,1fr);}
.claims-grid{grid-template-columns:repeat(3,1fr);}
.steps-grid{grid-template-columns:repeat(3,1fr);}
.security-grid{grid-template-columns:repeat(3,1fr);}
.teaser-points{grid-template-columns:repeat(3,1fr);}
.audience-grid{grid-template-columns:repeat(2,1fr);}
@media (max-width:940px){
.module-grid,
.claims-grid,
.steps-grid,
.security-grid,
.teaser-points,
.audience-grid{grid-template-columns:1fr;}
}
.ps-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-top:32px;
}
.ps-problem,
.ps-solution{
background:var(--bg-elev);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:28px 24px;
box-shadow:
0 24px 60px -28px rgba(0,0,0,0.6),
0 0 0 1px var(--border) inset;
}
.ps-problem h3,
.ps-solution h3{
font-size:var(--t-h3);
letter-spacing:var(--ls-h3);
margin-bottom:14px;
}
.ps-problem ul,
.ps-solution ul{
list-style:none;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
color:var(--fg);
font-size:14.5px;
line-height:1.55;
}
.ps-problem li,
.ps-solution li{position:relative;padding-left:18px;}
.ps-problem li::before{content:"✗";position:absolute;left:0;color:var(--err);font-family:var(--mono);}
.ps-solution li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-family:var(--mono);}
@media (max-width:940px){.ps-grid{grid-template-columns:1fr;}
}
.step-number{
font-family:var(--mono);
font-size:11px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--accent);
background:var(--accent-soft);
padding:4px 10px;
border-radius:100px;
align-self:flex-start;
}
.audience-item:not(:has(h3)){
padding:18px 20px;
font-size:14.5px;
color:var(--fg-muted);
font-weight:500;
}
.badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:5px 12px 5px 12px;
border-radius:100px;
border:1px solid var(--border-strong);
background:var(--bg-elev);
font-family:var(--mono);
font-size:11px;
letter-spacing:0.02em;
color:var(--fg-muted);
align-self:flex-start;
}
.badge-active{
background:var(--accent-soft);
color:var(--accent);
border-color:transparent;
text-transform:uppercase;
letter-spacing:0.06em;
padding:4px 10px;
}
.badge-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--accent);
animation:badge-pulse 1.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes badge-pulse{
0%{box-shadow:0 0 0 2px var(--accent-soft-2),0 0 0 2px var(--accent-soft);transform:scale(1);}
40%{box-shadow:0 0 0 4px var(--accent-soft-2),0 0 0 10px var(--accent-soft);transform:scale(1.15);}
100%{box-shadow:0 0 0 2px var(--accent-soft-2),0 0 0 2px var(--accent-soft);transform:scale(1);}
}
.badge-pink,.badge-orange,.badge-violet,.badge-emerald{}
/* ── Icons (claim-icon,security-icon,teaser-icon)
<span class="claim-icon icon-export"> renders a small accent tile with an
SVG icon (Lucide,ISC licence) drawn via CSS mask in currentColor. */
.claim-icon,
.security-icon,
.teaser-icon{
display:inline-grid;
place-items:center;
flex-shrink:0;
width:38px;
height:38px;
border-radius:10px;
background:var(--accent-soft);
color:var(--accent);
align-self:flex-start;
}
.claim-icon::before,
.security-icon::before,
.teaser-icon::before{
content:"";
width:20px;
height:20px;
background-color:currentColor;
-webkit-mask:var(--icon,none) center / contain no-repeat;
mask:var(--icon,none) center / contain no-repeat;
}
.icon-check{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}
.icon-shield{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");}
.icon-lock{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");}
.icon-unlock{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");}
.icon-search{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");}
.icon-building{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/%3E%3C/svg%3E");}
.icon-document{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");}
.icon-export{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5M12 15V3'/%3E%3C/svg%3E");}
.icon-server{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2' ry='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E");}
.icon-settings{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");}
.icon-minimize{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61M2 2l20 20'/%3E%3C/svg%3E");}
.icon-folder{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");}
.icon-scan{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3Cpath d='M8 17a4 4 0 0 1 8 0'/%3E%3C/svg%3E");}
.icon-chat{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");}
.icon-chart{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");}
.icon-clipboard{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E");}
.icon-calendar{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");}
.hero{
padding:96px 0 80px;
border-top:0;
}
.hero h1{
font-size:clamp(44px,6.4vw,88px);
line-height:0.98;
letter-spacing:-0.035em;
font-weight:600;
margin-bottom:24px;
text-wrap:balance;
max-width:880px;
}
/* Accent keyword treatment — Instrument Serif italic in --accent.
Works in any headline (.hero h1,.sub-hero h1,.cta-panel h2,…). */
.accent{
font-family:var(--serif);
font-style:italic;
font-weight:500;
color:var(--accent);
letter-spacing:-0.02em;
}
.hero .sub{
font-size:19px;
color:var(--fg-muted);
max-width:620px;
margin-bottom:36px;
line-height:1.45;
text-wrap:pretty;
}
.hero-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.hero-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:56px;
padding-top:32px;
border-top:1px dashed var(--border);
max-width:720px;
}
.hero-stat .v{
font-size:28px;
font-weight:600;
letter-spacing:-0.02em;
font-family:var(--mono);
color:var(--fg);
line-height:1;
}
.hero-stat .v .u{
font-size:18px;
color:var(--fg-dim);
}
.hero-stat .l{
font-size:12px;
color:var(--fg-dim);
margin-top:6px;
text-transform:uppercase;
letter-spacing:0.06em;
font-family:var(--mono);
}
@media (max-width:720px){
.hero{padding:56px 0 48px;}
.hero-stats{grid-template-columns:1fr;gap:16px;padding-top:24px;margin-top:40px;}
}
.hero-trust{
display:flex;
flex-wrap:wrap;
gap:12px 24px;
margin-top:32px;
font-family:var(--mono);
font-size:12.5px;
color:var(--fg-dim);
letter-spacing:0.04em;
text-transform:uppercase;
}
.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:32px;
}
.api-pricing-grid{
grid-template-columns:repeat(2,1fr);
max-width:900px;
margin-left:auto;
margin-right:auto;
}
@media (max-width:940px){
.pricing-grid,
.api-pricing-grid{grid-template-columns:1fr;}
}
.price-card{
background:var(--bg-elev);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:28px 24px;
display:flex;
flex-direction:column;
position:relative;
box-shadow:
0 24px 60px -28px rgba(0,0,0,0.6),
0 0 0 1px var(--border) inset;
}
.price-card.featured{
border-color:var(--accent);
background:linear-gradient(180deg,var(--accent-soft) 0%,var(--bg-elev) 40%);
}
.featured-badge{
position:absolute;
top:-10px;
right:18px;
background:var(--accent);
color:var(--accent-ink);
padding:3px 9px;
border-radius:100px;
font-size:10.5px;
font-weight:600;
font-family:var(--mono);
letter-spacing:0.04em;
text-transform:uppercase;
}
.price-card h3{
font-family:var(--mono);
font-size:13px;
color:var(--fg-muted);
text-transform:uppercase;
letter-spacing:0.06em;
margin-bottom:12px;
font-weight:500;
}
.price-old{
font-family:var(--mono);
font-size:18px;
color:var(--fg-dim);
text-decoration:line-through;
text-decoration-color:var(--err);
margin-bottom:4px;
}
.price-current{
font-family:var(--mono);
font-size:44px;
font-weight:600;
letter-spacing:-0.025em;
line-height:1;
color:var(--fg);
margin-bottom:8px;
}
.price-vat-old,
.price-vat-new{
font-family:var(--mono);
font-size:11.5px;
color:var(--fg-dim);
letter-spacing:0.02em;
}
.price-vat-old{text-decoration:line-through;}
.price-vat-new{margin-bottom:10px;}
.price-period{
font-size:13px;
color:var(--fg-dim);
margin-bottom:6px;
min-height:20px;
}
.price-period em{
font-style:normal;
font-family:var(--mono);
font-size:11px;
color:var(--accent);
text-transform:uppercase;
letter-spacing:0.04em;
}
.price-card ul{
list-style:none;
padding:0;
margin:22px 0;
display:flex;
flex-direction:column;
gap:10px;
}
.price-card li{
display:flex;
gap:10px;
font-size:14px;
color:var(--fg);
align-items:flex-start;
}
.price-card li::before{
content:"✓";
color:var(--accent);
font-family:var(--mono);
font-weight:600;
flex-shrink:0;
}
.price-card .btn,
.price-card .btn-primary{margin-top:auto;align-self:stretch;justify-content:center;}
.pricing-notes{
margin-top:32px;
font-size:13.5px;
color:var(--fg-muted);
text-align:center !important;
}
.pricing-notes p{display:inline;max-width:none;}
.api-pricing-notes{
margin-top:32px;
font-size:13px;
color:var(--fg-dim);
text-align:center;
}
.api-pricing-notes p{margin:4px 0;max-width:none;}
.faq-section{
padding:56px 0 96px;
}
.faq-section h2{
font-size:var(--t-h2);
letter-spacing:var(--ls-h2);
margin:48px 0 16px;
}
.faq-section h2:first-child{margin-top:0;}
.faq-filters{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-bottom:18px;
padding:4px;
border:1px solid var(--border);
border-radius:100px;
background:var(--bg-elev);
width:fit-content;
max-width:100%;
overflow-x:auto;
}
.faq-filter-btn{
padding:6px 14px;
border-radius:100px;
font-family:var(--mono);
font-size:12px;
letter-spacing:0.04em;
color:var(--fg-muted);
transition:color var(--dur-fast),background var(--dur-fast);
white-space:nowrap;
}
.faq-filter-btn:hover{color:var(--fg);background:var(--bg-elev-2);}
.faq-filter-btn.active{
color:var(--accent-ink);
background:var(--accent);
font-weight:600;
}
.faq-search-wrap{margin:0 0 32px;max-width:480px;}
.faq-search{
width:100%;
padding:11px 16px;
border:1px solid var(--border);
border-radius:var(--radius-sm);
background:var(--bg);
color:var(--fg);
font-size:14px;
transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.faq-search:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft-2);
}
.faq-search::placeholder{color:var(--fg-dim);}
.faq-no-results{
font-family:var(--mono);
font-size:13px;
color:var(--fg-dim);
text-align:center;
padding:24px;
border:1px dashed var(--border);
border-radius:var(--radius);
}
.faq-item{
padding:22px 0;
border-top:1px dashed var(--border);
}
.faq-item:first-of-type{border-top:1px dashed var(--border);}
.faq-item h3{
font-size:17px;
font-weight:600;
margin-bottom:12px;
letter-spacing:-0.015em;
color:var(--fg);
}
.faq-item p{
color:var(--fg-muted);
font-size:14.5px;
line-height:1.55;
margin-bottom:10px;
max-width:760px;
}
.faq-item p:last-child{margin-bottom:0;}
.faq-item ul{
margin:8px 0 12px 0;
padding-left:20px;
color:var(--fg-muted);
font-size:14.5px;
line-height:1.6;
}
.faq-item ul li{margin-bottom:4px;}
.faq-item strong{color:var(--fg);}
.faq-section h2 + .faq-item:last-child,
.faq-item + .faq-section h2{border-bottom:0;}
.legal-section{
padding:0 0 96px;
border-top:0;
}
.legal-content{
max-width:760px;
color:var(--fg);
font-size:15px;
line-height:1.65;
}
.legal-content h2{
font-size:26px;
letter-spacing:-0.02em;
margin:36px 0 14px;
font-weight:600;
text-wrap:balance;
}
.legal-content h3{
font-size:19px;
letter-spacing:-0.015em;
margin:28px 0 10px;
font-weight:600;
}
.legal-content p{margin-bottom:14px;color:var(--fg-muted);}
.legal-content p strong{color:var(--fg);}
.legal-content ul,
.legal-content ol{margin:0 0 18px 22px;color:var(--fg-muted);}
.legal-content li{margin-bottom:6px;line-height:1.55;}
.legal-content a{
color:var(--accent);
text-decoration:underline;
text-decoration-color:var(--accent-soft-2);
text-underline-offset:2px;
}
.legal-content a:hover{text-decoration-color:var(--accent);}
.legal-content hr{
border:0;
border-top:1px dashed var(--border);
margin:32px 0;
}
.legal-content code,
.legal-content kbd{color:var(--fg);}
#contact-form{margin-top:12px;max-width:560px;}
#contact-form p{margin:0 0 16px;}
#contact-form label{
display:block;
font-family:var(--mono);
font-size:11px;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--fg-dim);
margin-bottom:6px;
font-weight:500;
}
#contact-form label input[type="checkbox"]{
margin-right:8px;
accent-color:var(--accent);
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea{
width:100%;
padding:11px 14px;
border:1px solid var(--border);
border-radius:var(--radius-sm);
background:var(--bg);
color:var(--fg);
font-size:14px;
text-transform:none;
letter-spacing:normal;
font-family:var(--sans);
transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
#contact-form input:focus,
#contact-form textarea:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft-2);
}
#contact-form textarea{resize:vertical;min-height:140px;line-height:1.55;}
#contact-form label:has(> input[type="checkbox"]){
display:block;
text-transform:none;
letter-spacing:0;
font-family:var(--sans);
font-size:13px;
color:var(--fg-muted);
font-weight:400;
}
#contact-form button[type="submit"]{margin-top:4px;}
#contact-status{
font-family:var(--mono);
font-size:12.5px;
color:var(--fg-muted);
margin-top:12px;
}
.code-preview-section{padding:56px 0 32px;border-top:0;}
.code-preview-wrap{max-width:960px;}
.hero-code{
background:var(--bg-elev);
border:1px solid var(--border);
border-radius:var(--radius-lg);
overflow:hidden;
position:relative;
box-shadow:
0 24px 60px -28px rgba(0,0,0,0.6),
0 0 0 1px var(--border) inset;
}
.hero-code::after{
content:"";
position:absolute;
inset:-1px;
border-radius:var(--radius-lg);
pointer-events:none;
background:radial-gradient(600px 200px at 20% -10%,var(--accent-soft),transparent 60%);
opacity:0.6;
}
.hc-tabs{
display:flex;
border-bottom:1px solid var(--border);
padding:0 8px;
position:relative;
z-index:1;
}
.hc-tab{
padding:12px 14px;
font-family:var(--mono);
font-size:12px;
color:var(--fg-dim);
border-bottom:2px solid transparent;
margin-bottom:-1px;
background:transparent;
}
.hc-tab.on{color:var(--fg);border-bottom-color:var(--accent);}
.hc-body{
font-family:var(--mono);
font-size:12.5px;
line-height:1.65;
padding:20px 22px;
white-space:pre;
overflow-x:auto;
position:relative;
z-index:1;
font-variant-ligatures:none;
font-feature-settings:"calt" 0,"liga" 0;
color:var(--fg);
}
.tok-key{color:oklch(0.50 0.16 240);}
.tok-str{color:oklch(0.45 0.14 150);}
.tok-num{color:oklch(0.55 0.15 40);}
.tok-com{color:var(--fg-dim);font-style:italic;}
.tok-kw{color:oklch(0.50 0.18 320);}
.blog-list-section{padding:32px 0 96px;border-top:0;}
.blog-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
@media (max-width:720px){.blog-list{grid-template-columns:1fr;}
}
.blog-card{
background:var(--bg-elev);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:24px 22px;
display:flex;
flex-direction:column;
gap:12px;
transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast);
box-shadow:
0 24px 60px -28px rgba(0,0,0,0.6),
0 0 0 1px var(--border) inset;
}
.blog-card:hover{border-color:var(--border-strong);transform:translateY(-2px);}
.blog-card-meta{
font-family:var(--mono);
font-size:11px;
color:var(--fg-dim);
letter-spacing:0.06em;
text-transform:uppercase;
}
.blog-card-meta time{color:var(--fg-dim);}
.blog-card-meta .post-sep{padding:0 4px;}
.blog-card-category{
margin:0;
}
.blog-card-category a{
font-family:var(--mono);
font-size:11px;
color:var(--accent);
letter-spacing:0.08em;
text-transform:uppercase;
background:var(--accent-soft);
padding:3px 9px;
border-radius:100px;
}
.blog-card-category a:hover{color:var(--accent);background:var(--accent-soft-2);}
.blog-card h2{
font-size:20px;
line-height:1.25;
letter-spacing:-0.02em;
font-weight:600;
}
.blog-card h2 a{color:var(--fg);}
.blog-card h2 a:hover{color:var(--accent);}
.blog-card-excerpt{
color:var(--fg-muted);
font-size:14px;
line-height:1.55;
text-wrap:pretty;
}
.blog-empty{
font-family:var(--mono);
font-size:13.5px;
color:var(--fg-dim);
padding:32px;
text-align:center;
border:1px dashed var(--border);
border-radius:var(--radius);
}
.post{display:block;}
.post-header{padding:64px 0 24px;border-top:0;}
.post-header .container{max-width:760px;}
.post-eyebrow{
font-family:var(--mono);
font-size:11px;
color:var(--fg-dim);
letter-spacing:0.06em;
text-transform:uppercase;
margin-bottom:18px;
display:flex;
gap:8px;
}
.post-eyebrow a{color:var(--fg-muted);}
.post-eyebrow a:hover{color:var(--fg);}
.post-eyebrow .post-category{
color:var(--accent);
background:var(--accent-soft);
padding:2px 8px;
border-radius:100px;
}
.post-header h1{
font-size:clamp(32px,4.4vw,52px);
line-height:1.04;
letter-spacing:-0.025em;
font-weight:600;
margin-bottom:16px;
text-wrap:balance;
}
.post-byline{
font-family:var(--mono);
font-size:12px;
color:var(--fg-dim);
letter-spacing:0.04em;
text-transform:uppercase;
display:flex;
gap:6px;
flex-wrap:wrap;
}
.post-byline .post-sep{color:var(--border-strong);}
.post-body{padding:24px 0 64px;}
.post-body .container,
.post-content{
max-width:720px;
margin:0 auto;
}
.post-content{
color:var(--fg);
font-size:16px;
line-height:1.7;
}
.post-content h2{
font-size:26px;
letter-spacing:-0.02em;
margin:40px 0 14px;
font-weight:600;
text-wrap:balance;
}
.post-content h3{
font-size:19px;
letter-spacing:-0.015em;
margin:28px 0 10px;
}
.post-content p{margin-bottom:18px;color:var(--fg);text-wrap:pretty;}
.post-content p strong{color:var(--fg);}
.post-content ul,
.post-content ol{margin:0 0 22px 22px;}
.post-content li{margin-bottom:6px;}
.post-content a{
color:var(--accent);
text-decoration:underline;
text-decoration-color:var(--accent-soft-2);
text-underline-offset:2px;
}
.post-content a:hover{text-decoration-color:var(--accent);}
.post-content blockquote{
border-left:2px solid var(--accent);
padding:6px 0 6px 18px;
color:var(--fg-muted);
margin:22px 0;
font-style:normal;
}
.post-content hr{
border:0;
border-top:1px dashed var(--border);
margin:36px 0;
}
.post-content code{
background:var(--bg-elev-2);
border-radius:4px;
padding:1px 6px;
}
.post-content pre{
background:var(--bg-elev);
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px 20px;
overflow-x:auto;
font-family:var(--mono);
font-size:13px;
line-height:1.6;
margin:22px 0;
box-shadow:
0 24px 60px -28px rgba(0,0,0,0.6),
0 0 0 1px var(--border) inset;
}
.post-content pre code{
background:transparent;
padding:0;
font-size:inherit;
}
.related-posts{padding:56px 0 64px;border-top:1px dashed var(--border);}
.related-posts h2{
font-size:22px;
letter-spacing:-0.02em;
margin-bottom:22px;
font-weight:600;
}
.post-footer{padding:16px 0 80px;border-top:0;}
.post-back{
font-family:var(--mono);
font-size:13px;
color:var(--accent);
display:inline-flex;
align-items:center;
gap:6px;
}
.post-back:hover{color:var(--accent);text-decoration:underline;}
.cta-panel{
background:var(--bg-elev);
border:1px solid var(--border);
border-radius:var(--radius-xl);
padding:56px 48px;
max-width:720px;
margin:0 auto;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
box-shadow:
0 24px 60px -28px rgba(0,0,0,0.6),
0 0 0 1px var(--border) inset;
position:relative;
overflow:hidden;
}
.cta-panel::after{
content:"";
position:absolute;
inset:-1px;
border-radius:var(--radius-xl);
pointer-events:none;
background:radial-gradient(800px 220px at 50% -10%,var(--accent-soft),transparent 60%);
opacity:0.7;
}
.cta-panel > *{position:relative;z-index:1;}
.cta-panel h2{
font-size:clamp(28px,3.8vw,40px);
line-height:1.05;
letter-spacing:-0.025em;
font-weight:600;
max-width:560px;
margin:0;
text-wrap:balance;
}
.cta-panel .cta-sub{
color:var(--fg-muted);
font-size:16px;
line-height:1.55;
max-width:520px;
margin:0;
text-wrap:pretty;
}
.cta-panel .cta-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;
margin-top:8px;
}
@media (max-width:720px){
.cta-panel{padding:40px 24px;}
}