/* ============================================================
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{}
/* ── Icon stubs (claim-icon,security-icon,teaser-icon)
The current markup uses <span class="claim-icon icon-export"> etc. as
pure decorative slots. The new design renders these as small accent
tiles. Future replacement with inline SVGs is fine but not required. */
.claim-icon,
.security-icon,
.teaser-icon{
display:inline-grid;
place-items:center;
width:38px;
height:38px;
border-radius:10px;
background:var(--accent-soft);
color:var(--accent);
align-self:flex-start;
font-family:var(--mono);
font-weight:600;
font-size:14px;
}
.claim-icon::before,
.security-icon::before,
.teaser-icon::before{content:"◌";}
.icon-check::before{content:"✓";}
.icon-shield::before{content:"▣";}
.icon-lock::before{content:"●";}
.icon-unlock::before{content:"○";}
.icon-search::before{content:"?";}
.icon-building::before{content:"▤";}
.icon-document::before{content:"≡";}
.icon-export::before{content:"↗";}
.icon-server::before{content:"▦";}
.icon-settings::before{content:"*";}
.icon-minimize::before{content:"—";}
.icon-folder::before{content:"▢";}
.icon-scan::before{content:"~";}
.icon-chat::before{content:"“";}
.icon-chart::before{content:"△";}
.icon-clipboard::before{content:"≡";}
.icon-calendar::before{content:"▦";}
.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;}
}