/* ==========================================================================
Lola Rodríguez — personal site
Design system: dark canvas, dot-grid, mono UI + big display sans + italic serif accent
Fonts are loaded via + in each
page's (not @import here) so the browser can start fetching them
immediately instead of waiting to parse this file first.
========================================================================== */
:root{
--bg: #08080a;
--bg-raised: #0e0e11;
--bg-card: #131316;
--text: #f3f2ee;
--text-dim: #8d8d94;
--text-faint: #55555c;
--line: rgba(255,255,255,.10);
--line-strong: rgba(255,255,255,.22);
--accent: #4d5bff; /* indigo — growth / primary */
--accent-soft: #b9c0ff;
--accent-ai: #b98bff; /* violet — AI */
--accent-pm: #ffb24d; /* amber — project management */
--accent-warn: #ff5a4d; /* coral — cursor / hot accents */
--font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Space Mono', 'SFMono-Regular', Menlo, monospace;
--font-serif: 'Instrument Serif', Georgia, serif;
--container: 1180px;
--gutter: clamp(24px, 6vw, 72px);
--ease: cubic-bezier(.16,.84,.44,1);
}
*, *::before, *::after{ box-sizing: border-box; }
html{
background: var(--bg);
scroll-behavior: smooth;
}
body{
margin: 0;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0) 0 0/28px 28px,
var(--bg);
color: var(--text);
font-family: var(--font-display);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection{ background: var(--accent); color: #fff; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }
.wrap{
max-width: var(--container);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.mono{ font-family: var(--font-mono); }
.sr-only{
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.noscript-links{ padding: 24px var(--gutter); }
.noscript-links a{ display: block; padding: 6px 0; color: var(--text-dim); }
.serif-i{ font-family: var(--font-serif); font-style: italic; font-weight: 400; }
/* ---------- nav ---------- */
.nav{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px var(--gutter);
backdrop-filter: blur(10px);
background: linear-gradient(to bottom, rgba(8,8,10,.85), rgba(8,8,10,0));
}
.logo{
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
letter-spacing: .02em;
}
.logo-mark{
display: grid;
grid-template-columns: repeat(3, 4px);
grid-template-rows: repeat(3, 4px);
gap: 2px;
}
.logo-mark i{ width: 4px; height: 4px; background: var(--text-faint); border-radius: 1px; }
.logo-mark i:nth-child(1),
.logo-mark i:nth-child(4),
.logo-mark i:nth-child(7),
.logo-mark i:nth-child(8){ background: var(--accent); }
.nav-links{
display: flex;
align-items: center;
gap: 28px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-dim);
}
.nav-links a{ position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.nav-links a:hover{ color: var(--text); }
.nav-links a.active{ color: var(--text); }
.nav-links a::after{
content: '';
position: absolute; left: 0; right: 100%; bottom: -2px;
height: 1px; background: var(--accent);
transition: right .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right: 0; }
.nav-cta{
border: 1px solid var(--line-strong);
border-radius: 999px;
padding: 8px 16px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.nav-cta:hover{ border-color: var(--accent); background: rgba(77,91,255,.1); }
/* ---------- hero deck ---------- */
.deck-spacer{
height: 600vh;
position: relative;
}
.deck-stage{
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.deck-eyebrow{
position: absolute;
top: 96px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-faint);
text-align: center;
letter-spacing: .08em;
text-transform: uppercase;
}
.deck{
position: relative;
width: min(640px, 86vw);
height: min(340px, 50vh);
}
.card-stack{
position: absolute;
inset: 0;
}
.card-stack .ghost{
position: absolute;
inset: 0;
border-radius: 22px;
border: 1px solid var(--line);
background: var(--bg-card);
}
.card-stack .ghost:nth-child(1){ transform: translateY(10px) scale(.98); opacity: .55; }
.card-stack .ghost:nth-child(2){ transform: translateY(20px) scale(.96); opacity: .32; }
.card-stack .ghost:nth-child(3){ transform: translateY(30px) scale(.94); opacity: .16; }
.card{
position: absolute;
inset: 0;
border-radius: 22px;
border: 1px solid var(--line-strong);
background: var(--bg-raised);
padding: clamp(22px, 3vh, 34px) clamp(28px, 4vw, 48px);
display: flex;
flex-direction: column;
box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.card-head{
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-faint);
margin-bottom: clamp(16px, 2.5vh, 28px);
flex-shrink: 0;
}
.card-index{ font-weight: 700; color: var(--text-dim); }
.card-dots{ display: flex; gap: 6px; }
.card-dots span{ width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.card-dots span.on{ background: var(--accent); }
.card-body{
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
}
.deck-lines{
display: flex;
flex-direction: column;
gap: 0;
}
.deck-line{
font-size: clamp(13px, 1.6vw, 17px);
line-height: 1.35;
color: var(--text);
white-space: pre-wrap;
min-height: 1.35em;
margin: 0 0 3px;
}
.deck-line .cursor-caret{
display: inline-block;
width: .5em;
height: .85em;
background: var(--accent);
vertical-align: text-bottom;
margin-left: 2px;
opacity: 0;
}
.deck-line.typing .cursor-caret{
opacity: 1;
animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }
.card-cta{
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 10px;
padding: 4px 12px;
border-radius: 999px;
background: var(--text);
color: var(--bg);
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
vertical-align: middle;
white-space: nowrap;
opacity: 0;
transform: translateX(-4px);
transition: opacity .4s var(--ease), transform .4s var(--ease);
pointer-events: none;
}
.card-cta.show{ opacity: 1; transform: translateX(0); pointer-events: auto; }
.deck-progress{
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
}
.deck-progress i{
width: 18px; height: 2px;
background: var(--line-strong);
transition: background-color .25s var(--ease), width .25s var(--ease);
}
.deck-progress i.done{ background: var(--accent); }
.deck-progress i.on{ background: var(--accent); width: 30px; }
.scroll-hint{
position: absolute;
bottom: 40px;
right: var(--gutter);
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .1em;
}
.scroll-hint .line{ width: 1px; height: 24px; background: linear-gradient(to bottom, var(--text-faint), transparent); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 51%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }
/* ---------- section shell ---------- */
section{ position: relative; }
.section-pad{ padding: clamp(80px, 12vw, 160px) 0; }
.section-head{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: clamp(40px, 6vw, 72px);
border-bottom: 1px solid var(--line);
padding-bottom: 24px;
}
.section-num{
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-faint);
}
.section-title{
font-size: clamp(32px, 5vw, 56px);
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.05;
}
.section-link{
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-dim);
white-space: nowrap;
border-bottom: 1px solid var(--line-strong);
padding-bottom: 3px;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.section-link:hover{ color: var(--accent); border-color: var(--accent); }
/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0); }
/* ---------- post list ---------- */
.post-row{
display: grid;
grid-template-columns: 90px 1fr auto auto;
align-items: center;
gap: 28px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
transition: padding-left .3s var(--ease), background-color .3s var(--ease);
}
.post-row:hover{ padding-left: 14px; background: rgba(255,255,255,.02); }
.post-row .idx{ font-family: var(--font-mono); color: var(--text-faint); font-size: 13px; }
.post-row .meta{
display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.post-row .title{
font-size: clamp(20px, 2.6vw, 30px);
font-weight: 500;
letter-spacing: -.01em;
transition: color .25s var(--ease);
}
.post-row:hover .title{ color: var(--accent-soft); }
.post-row .excerpt{
color: var(--text-dim);
font-size: 14.5px;
max-width: 60ch;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tag{
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line-strong);
color: var(--text-dim);
white-space: nowrap;
}
.tag[data-cat="growth"]{ border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-soft); }
.tag[data-cat="ai"]{ border-color: color-mix(in srgb, var(--accent-ai) 55%, transparent); color: var(--accent-ai); }
.tag[data-cat="pm"]{ border-color: color-mix(in srgb, var(--accent-pm) 55%, transparent); color: var(--accent-pm); }
.post-row .date{
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-faint);
white-space: nowrap;
}
@media (max-width: 720px){
.post-row{ grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
.post-row .idx{ display: none; }
.post-row .excerpt{ -webkit-line-clamp: 2; }
}
/* ---------- interlude / statement band ---------- */
.band{
padding: clamp(90px, 14vw, 170px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
text-align: center;
}
.band p{
max-width: 18ch;
margin: 0 auto;
font-size: clamp(32px, 6vw, 68px);
line-height: 1.12;
font-weight: 500;
letter-spacing: -.02em;
}
.band .serif-i{ color: var(--accent-soft); }
/* ---------- about teaser (secondary, low-key) ---------- */
.about-teaser{
display: grid;
grid-template-columns: 96px 1fr auto;
align-items: center;
gap: 28px;
padding: 28px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--bg-raised);
}
.avatar{
width: 72px; height: 72px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, var(--accent), var(--accent-ai));
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-weight: 700; color: #fff; font-size: 22px;
flex-shrink: 0;
}
.avatar img{ width: 100%; height: 100%; object-fit: cover; }
.about-teaser .line1{ color: var(--text-dim); font-size: 14px; margin-bottom: 4px; }
.about-teaser .line2{ font-size: 17px; }
@media (max-width: 640px){
.about-teaser{ grid-template-columns: 56px 1fr; }
.about-teaser a.section-link{ grid-column: 1 / -1; justify-self: start; }
}
/* ---------- footer ---------- */
footer{
padding: 48px var(--gutter) 40px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-faint);
}
footer .foot-links{ display: flex; gap: 20px; }
footer a:hover{ color: var(--text); }
/* ---------- about page ---------- */
.about-hero{
display: grid;
grid-template-columns: 220px 1fr;
gap: clamp(32px, 6vw, 80px);
align-items: start;
padding-top: clamp(140px, 16vw, 200px);
}
.about-hero .avatar-lg{
width: 180px; height: 180px;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(160deg, var(--accent), var(--accent-ai));
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-weight: 700; color: #fff; font-size: 44px;
}
.about-hero .avatar-lg img{ width: 100%; height: 100%; object-fit: cover; }
.about-copy .lede{
font-size: clamp(30px, 4.5vw, 44px);
color: var(--text);
margin: 0 0 8px;
line-height: 1.1;
}
.about-copy .intro{
font-size: clamp(15px, 1.6vw, 17px);
line-height: 1.6;
color: var(--text-dim);
max-width: 58ch;
margin: 0 0 clamp(28px, 4vw, 40px);
}
.about-copy .closing{
font-size: clamp(14px, 1.5vw, 16px);
line-height: 1.6;
color: var(--text-dim);
max-width: 58ch;
margin: 0 0 20px;
}
.about-copy strong{ color: var(--text); font-weight: 500; }
.about-timeline{
position: relative;
display: flex;
flex-direction: column;
gap: 26px;
margin: 0 0 clamp(28px, 4vw, 40px);
padding-left: 24px;
border-left: 2px solid var(--line);
}
.about-row{ position: relative; }
.about-row::before{
content: '';
position: absolute;
left: -29px;
top: 5px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--bg);
}
.about-row .about-label{
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--accent-soft);
margin-bottom: 8px;
}
.about-row p{
font-size: clamp(14px, 1.5vw, 16px);
line-height: 1.6;
color: var(--text-dim);
max-width: 56ch;
margin: 0;
}
.fact-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
margin-top: clamp(50px, 8vw, 90px);
}
.fact{
background: var(--bg-raised);
padding: 28px;
}
.fact .k{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 10px; }
.fact .v{ font-size: 17px; }
@media (max-width: 720px){
.about-hero{ grid-template-columns: 1fr; }
}
/* ---------- blog page ---------- */
.blog-hero{
padding-top: clamp(140px, 16vw, 200px);
padding-bottom: 40px;
}
.blog-hero h1{
font-size: clamp(40px, 7vw, 84px);
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.02;
max-width: 14ch;
}
.blog-hero .sub{ color: var(--text-dim); font-size: clamp(15px, 1.6vw, 18px); max-width: 60ch; margin-top: 18px; }
.filters{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 32px 0 8px;
}
.filter-btn{
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid var(--line-strong);
color: var(--text-dim);
transition: all .2s var(--ease);
cursor: pointer;
background: transparent;
}
.filter-btn:hover{ color: var(--text); }
.filter-btn.active{ background: var(--text); color: var(--bg); border-color: var(--text); }
/* ---------- post article page ---------- */
.post-hero{
padding-top: clamp(140px, 16vw, 200px);
padding-bottom: 40px;
border-bottom: 1px solid var(--line);
}
.post-hero .tags{ display: flex; gap: 10px; margin-bottom: 24px; }
.post-hero h1{
font-size: clamp(34px, 6vw, 64px);
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.06;
max-width: 20ch;
}
.post-hero .dek{
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(19px, 2.2vw, 24px);
color: var(--text-dim);
line-height: 1.5;
max-width: 52ch;
margin-top: 22px;
}
.post-hero .byline{
display: flex; align-items: center; gap: 12px;
margin-top: 28px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-faint);
flex-wrap: wrap;
}
.post-hero .byline .avatar{ width: 34px; height: 34px; font-size: 13px; }
.post-hero .byline .src-link{ color: var(--text-faint); border-bottom: 1px solid var(--line-strong); transition: color .2s var(--ease), border-color .2s var(--ease); }
.post-hero .byline .src-link:hover{ color: var(--accent-soft); border-color: var(--accent); }
.post-body{
max-width: 72ch;
margin: 0 auto;
padding: clamp(50px, 8vw, 90px) 0;
font-size: clamp(17px, 1.9vw, 19px);
line-height: 1.75;
color: #d9d9d6;
}
.post-body p{ margin: 0 0 26px; }
.post-body h2{
font-size: clamp(24px, 3vw, 32px);
font-weight: 500;
color: var(--text);
margin: 56px 0 22px;
letter-spacing: -.01em;
}
.post-body h3{ font-size: 20px; color: var(--text); margin: 40px 0 16px; }
.post-body blockquote{
margin: 40px 0;
padding: 4px 0 4px 26px;
border-left: 2px solid var(--accent);
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(22px, 2.6vw, 30px);
color: var(--accent-soft);
line-height: 1.4;
}
.post-body ul, .post-body ol{ margin: 0 0 26px; padding-left: 22px; }
.post-body li{ margin-bottom: 10px; }
.post-body code{
font-family: var(--font-mono);
background: var(--bg-card);
padding: 2px 6px;
border-radius: 4px;
font-size: .88em;
}
.post-body strong{ color: var(--text); }
.post-body a{ color: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 40%, transparent); transition: border-color .2s var(--ease); }
.post-body a:hover{ border-color: var(--accent-soft); }
.post-body table{
width: 100%;
border-collapse: collapse;
margin: 36px 0;
font-size: .92em;
}
.post-body table caption{
text-align: left;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-faint);
margin-bottom: 10px;
}
.post-body th, .post-body td{
text-align: left;
padding: 12px 16px;
border: 1px solid var(--line);
}
.post-body th{
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-dim);
background: var(--bg-card);
}
.post-body td{ color: #d9d9d6; }
.post-body td strong{ color: var(--accent-soft); }
/* ---------- TL;DR summary ---------- */
.tldr{
max-width: 72ch;
margin: clamp(36px, 6vw, 60px) auto clamp(30px, 5vw, 50px);
border: 1px solid var(--line-strong);
border-left: 3px solid var(--accent);
border-radius: 4px 14px 14px 4px;
background: var(--bg-raised);
padding: 22px 26px;
}
.tldr .label{
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--accent-soft);
margin-bottom: 10px;
}
.tldr p{ margin: 0 0 10px; color: #d9d9d6; font-size: 16px; line-height: 1.6; }
.tldr ul{ margin: 10px 0 0; padding-left: 20px; }
.tldr li{ margin-bottom: 6px; color: #d9d9d6; font-size: 15px; }
/* ---------- FAQ ---------- */
.faq{
max-width: 72ch;
margin: 0 auto;
padding: clamp(40px, 6vw, 70px) 0;
border-top: 1px solid var(--line);
}
.faq .section-num{ font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.faq h2{ font-size: clamp(24px, 3vw, 30px); font-weight: 500; margin: 0 0 28px; }
.faq-item{ margin-bottom: 24px; }
.faq-item h3{ font-size: 17px; color: var(--text); margin: 0 0 8px; font-weight: 500; }
.faq-item p{ color: var(--text-dim); font-size: 15.5px; line-height: 1.65; margin: 0; }
/* ---------- author card ---------- */
.author-card{
max-width: 72ch;
margin: 0 auto clamp(20px, 4vw, 40px);
display: flex;
align-items: center;
gap: 20px;
padding: 22px 26px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--bg-raised);
}
.author-card .avatar{ width: 56px; height: 56px; flex-shrink: 0; font-size: 18px; }
.author-card .name{ font-size: 16px; margin-bottom: 3px; }
.author-card .role{ font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-bottom: 8px; }
.author-card .bio{ color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0 0 8px; }
.author-card .li-link{ font-family: var(--font-mono); font-size: 12px; color: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 45%, transparent); }
@media (max-width: 560px){
.author-card{ flex-direction: column; align-items: flex-start; text-align: left; }
}
.related-posts{
max-width: 72ch;
margin: 0 auto clamp(30px, 5vw, 50px);
}
.related-posts .section-num{ margin-bottom: 4px; }
.related-posts .post-row{
grid-template-columns: 1fr auto auto;
padding: 20px 0;
}
.related-posts .post-row .idx{ display: none; }
@media (max-width: 720px){
.related-posts .post-row{ grid-template-columns: 1fr; }
}
.post-footer{
max-width: 72ch;
margin: 0 auto;
padding-bottom: clamp(60px, 10vw, 110px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 32px;
}
/* ---------- placeholder / soon post ---------- */
.soon-note{
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-faint);
text-align: center;
padding: 60px var(--gutter);
}
/* generic buttons */
.btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
border-radius: 999px;
background: var(--text);
color: var(--bg);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.btn:hover{ transform: translateY(-2px); background: var(--accent-soft); }
.btn-outline{
background: transparent;
color: var(--text);
border: 1px solid var(--line-strong);
}
.btn-outline:hover{ border-color: var(--accent); background: rgba(77,91,255,.08); }
/* mobile nav toggle (simple, links already few) */
@media (max-width: 640px){
.nav-links{ gap: 16px; font-size: 12px; }
.nav-cta{ display: none; }
}