/* ============================================================================
TONNET DESIGN SYSTEM — TOP-style
Dark mode is default. Add class="theme-light" on to flip.
All colors, fonts, spacing, components are controlled from this file.
============================================================================ */
/* ============================================================================
TOKENS
============================================================================ */
:root {
/* === DARK (default) === */
--bg: #080C1A;
--bg-alt: #111829;
--bg-elevated: #141B30;
--fg: #F5F0E0;
--fg-soft: #C9C5B5;
--fg-muted: #8B91A8;
--fg-dim: #4A5066;
--blue: #3E90FF;
--blue-soft: #122246;
--blue-deep: #6FA8FF;
--blue-kicker-fg: #8DB8FF;
--purple-sparkle: #8B7FDD;
--border: rgba(245, 240, 224, 0.08);
--border-soft: rgba(245, 240, 224, 0.05);
--border-strong: rgba(245, 240, 224, 0.16);
/* squircle backgrounds */
--sq-dark: #141B30;
--sq-blue: #3E90FF;
/* CTA — inverts cleanly across themes */
--cta-bg: var(--fg);
--cta-fg: var(--bg);
/* typography */
--display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
--sans: var(--body);
--mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
/* layout */
--max-w: 1200px;
--max-w-text: 720px;
--radius: 14px;
--radius-lg: 24px;
}
/* === LIGHT override === */
.theme-light {
--bg: #FBF7EB;
--bg-alt: #F4EEDD;
--bg-elevated: #FFFFFF;
--fg: #0E1423;
--fg-soft: #1A2238;
--fg-muted: #5D6475;
--fg-dim: #A8AEBD;
--blue: #2B7FFF;
--blue-soft: #DCE8FF;
--blue-deep: #1E5FD9;
--blue-kicker-fg: #1E5FD9;
--purple-sparkle: #4A3FAA;
--border: rgba(14, 20, 35, 0.08);
--border-soft: rgba(14, 20, 35, 0.04);
--border-strong: rgba(14, 20, 35, 0.16);
--sq-dark: #0E1423;
}
/* ============================================================================
RESET
============================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior: contain; color-scheme: dark; }
.theme-light { color-scheme: light; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--body);
font-size: 1.05rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
/* ============================================================================
NAV
============================================================================ */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg);
padding: 1.4rem 2.5rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-logo {
display: flex;
align-items: center;
gap: 0.7rem;
font-family: var(--display);
font-weight: 800;
font-size: 1.45rem;
color: var(--fg);
text-decoration: none;
letter-spacing: -0.025em;
}
.nav-logo-mark {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: var(--blue);
}
.nav-logo-mark svg { width: 100%; height: 100%; }
.nav-links {
display: flex;
align-items: center;
gap: 2.4rem;
}
.nav-link {
font-family: var(--display);
font-weight: 500;
font-size: 0.98rem;
color: var(--fg);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.3rem;
transition: color 0.15s;
}
.nav-link:hover { color: var(--blue); }
.nav-link .caret {
display: inline-block;
width: 10px;
height: 10px;
border-right: 1.8px solid currentColor;
border-bottom: 1.8px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
margin-left: 0.1rem;
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.8rem 1.4rem;
background: var(--cta-bg);
color: var(--cta-fg);
border-radius: 999px;
font-family: var(--display);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: transform 0.15s;
}
.nav-cta:hover { transform: translateY(-1px); }
/* ============================================================================
HERO
============================================================================ */
.hero {
padding: 6rem 2.5rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-title {
font-family: var(--display);
font-weight: 800;
font-size: clamp(2.8rem, 7vw, 6rem);
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--fg);
margin: 0 auto;
max-width: 1250px;
position: relative;
}
.hero-title-wrap {
position: relative;
display: inline-block;
}
.hero-title-underline {
position: absolute;
bottom: -0.18em;
left: 0;
right: 0;
width: 100%;
height: 28px;
overflow: visible;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}
.hero-title-underline path {
stroke: var(--blue);
stroke-width: 5;
stroke-linecap: round;
fill: none;
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
animation: draw 1.2s ease-out 0.4s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
/* ============================================================================
ICON CLUSTER
============================================================================ */
.cluster {
position: relative;
width: 100%;
max-width: 1100px;
height: 440px;
margin: 2rem auto 0;
}
.cluster > * {
position: absolute;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}
.sq {
width: var(--w, 110px);
height: var(--w, 110px);
border-radius: 28%;
display: flex;
align-items: center;
justify-content: center;
}
.sq svg,
.sq img { width: 52%; height: 52%; object-fit: contain; }
.pos-2 svg { width: 72%; height: 72%; }
.pos-4 svg { width: 75%; height: 75%; }
.pos-7 svg { width: 72%; height: 72%; }
.sq-blue { background: var(--sq-blue); }
.sq-navy { background: var(--sq-dark); }
.pos-1 { top: 80px; left: 6%; --w: 88px; --r: -14deg; animation-delay: 0s; }
.pos-2 { top: 150px; left: 16%; --w: 96px; --r: 9deg; animation-delay: 0.5s; }
.pos-3 { top: 40px; left: 35%; --w: 108px; --r: -6deg; animation-delay: 1.2s; }
.pos-4 { top: 170px; left: 42%; --w: 188px; --r: -8deg; animation-delay: 0.8s; }
.pos-5 { top: 110px; left: 57%; --w: 126px; --r: 6deg; animation-delay: 1.5s; }
.pos-6 { top: 210px; left: 68%; --w: 96px; --r: -10deg; animation-delay: 0.3s; }
.pos-7 { top: 70px; left: 78%; --w: 104px; --r: 12deg; animation-delay: 1s; }
.dec { position: absolute; pointer-events: none; }
.dec-sparkle-1 { top: 20px; left: 54%; width: 54px; animation: float 4s ease-in-out infinite; --r: 0deg; }
.dec-sparkle-2 { top: 310px; left: 33%; width: 38px; animation: float 5s ease-in-out infinite 0.7s; --r: 0deg; }
.dec-sparkle-3 { top: 30px; left: 72%; width: 42px; animation: float 4.5s ease-in-out infinite 1.1s; --r: 0deg; }
.dec-sparkle-1 path { fill: var(--fg); }
.dec-sparkle-2 path { stroke: var(--blue); }
.dec-sparkle-3 path { fill: var(--purple-sparkle); }
.dec-squiggle-1 { top: 260px; left: 14%; width: 120px; transform: rotate(-12deg); }
.dec-squiggle-2 { top: 30px; left: 64%; width: 100px; transform: rotate( 15deg); }
.dec-squiggle-3 { top: 165px; left: 72%; width: 80px; transform: rotate(-22deg); }
.dec-squiggle-1 path,
.dec-squiggle-2 path,
.dec-squiggle-3 path { stroke: var(--blue); }
.dec-blob {
top: 100px;
left: 28%;
width: 180px;
height: 180px;
background: var(--bg-alt);
border-radius: 44% 56% 62% 38% / 50% 40% 60% 50%;
z-index: -1;
animation: float 8s ease-in-out infinite;
--r: 0deg;
}
/* TLD tags — small monospace labels orbiting each chain logo */
.cluster .tld {
position: absolute;
font-family: var(--mono);
font-weight: 500;
letter-spacing: -0.005em;
color: var(--blue);
pointer-events: none;
user-select: none;
white-space: nowrap;
text-shadow: 0 0 10px rgba(62, 144, 255, 0.2);
animation: float 5s ease-in-out infinite;
--r: 0deg;
}
.cluster .tld.tld-primary {
color: var(--fg);
font-weight: 700;
text-shadow: 0 0 18px rgba(245, 240, 224, 0.35), 0 0 4px rgba(245, 240, 224, 0.4);
z-index: 10;
}
/* ============================================================================
HERO SUB + CTA
============================================================================ */
.hero-sub {
max-width: 920px;
margin: 2.5rem auto 0;
font-family: var(--display);
font-weight: 500;
font-size: 1.55rem;
line-height: 1.45;
letter-spacing: -0.018em;
color: var(--fg);
padding: 0 1rem;
text-align: center;
}
.hero-sub .muted,
#problem .muted,
#how .muted { color: var(--fg-muted); font-weight: 400; }
.hero-sub .hl,
#problem .hl,
#how .hl {
position: relative;
color: var(--blue);
white-space: nowrap;
font-weight: 700;
}
.hero-sub .hl::after,
#problem .hl::after,
#how .hl::after {
content: '';
position: absolute;
left: -2%;
right: -2%;
bottom: -0.12em;
height: 7px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.theme-light .hero-sub .hl::after,
.theme-light #problem .hl::after,
.theme-light #how .hl::after {
background-image: url("data:image/svg+xml;utf8,");
}
.hero-ctas {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2.5rem;
padding-bottom: 5rem;
flex-wrap: wrap;
}
/* ============================================================================
BUTTONS
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1.8rem;
border-radius: 999px;
font-family: var(--display);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}
.btn-primary {
background: var(--blue);
color: #ffffff;
box-shadow: 0 4px 0 var(--blue-deep);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 var(--blue-deep);
}
.btn-secondary {
background: transparent;
color: var(--fg);
border-color: var(--fg);
}
.btn-secondary:hover {
background: var(--fg);
color: var(--bg);
}
/* ============================================================================
LEGACY SECTIONS — Phase B will refactor each
They consume the new tokens via the legacy aliases at the top.
============================================================================ */
.section { padding: clamp(5.5rem, 9vw, 9rem) 2rem; position: relative; }
.section-alt {
padding-top: clamp(6rem, 8vw, 7.5rem);
padding-bottom: clamp(6rem, 8vw, 7.5rem);
position: relative;
z-index: 1;
}
.section-inner { max-width: var(--max-w-text); margin: 0 auto; }
.section-wide { max-width: var(--max-w); }
.section h2 {
font-family: var(--display);
font-size: clamp(2rem, 3.4vw + 0.5rem, 3rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--fg);
margin-bottom: 1.6rem;
}
.section p {
font-family: var(--display);
font-weight: 500;
color: var(--fg-muted);
font-size: 1.55rem;
line-height: 1.45;
letter-spacing: -0.018em;
margin-bottom: 1.2rem;
}
.section-intro {
font-family: var(--display);
font-weight: 500;
font-size: 1.55rem;
color: var(--fg);
max-width: var(--max-w);
line-height: 1.45;
letter-spacing: -0.018em;
margin-bottom: 2.4rem;
}
/* === PROBLEM === */
#problem .section-inner,
#how .section-inner { max-width: var(--max-w); text-align: center; }
#problem h2,
#how h2 {
margin: 0 auto 3rem;
max-width: 1000px;
font-family: var(--display);
font-weight: 800;
font-size: clamp(2.8rem, 5.5vw + 0.5rem, 5rem);
line-height: 0.98;
letter-spacing: -0.035em;
color: var(--fg);
}
#problem .problem-lead,
#how .problem-lead {
color: var(--fg);
font-family: var(--display);
font-weight: 500;
font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2rem);
line-height: 1.35;
letter-spacing: -0.02em;
max-width: var(--max-w);
margin: 0 auto 4rem;
}
#problem .problem-copy p,
#how .problem-copy p {
color: var(--fg);
font-family: var(--display);
font-weight: 500;
font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2rem);
line-height: 1.35;
letter-spacing: -0.02em;
max-width: var(--max-w);
margin: 0 auto;
}
#problem .problem-copy p + p,
#how .problem-copy p + p {
margin-top: 2.8rem;
}
#problem .problem-copy p .hl,
#how .problem-copy p .hl {
color: var(--blue);
font-weight: 700;
white-space: nowrap;
}
.problem-lead {
max-width: var(--max-w);
margin: 0 auto 2rem;
font-family: var(--display);
font-weight: 500;
font-size: 1.55rem;
line-height: 1.45;
letter-spacing: -0.018em;
color: var(--fg);
}
.problem-copy { max-width: var(--max-w); margin: 0 auto; }
/* === COMPARISON TABLE — hand-drawn white lines === */
.cmp-table-wrap {
background: transparent;
overflow-x: auto;
padding: 1.5rem 0;
}
.cmp-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
table-layout: fixed;
font-family: var(--display);
--hl-h: url("data:image/svg+xml;utf8,");
--hl-v: url("data:image/svg+xml;utf8,");
}
.cmp-table th:first-child,
.cmp-table td:first-child { width: 24%; }
.cmp-table th:nth-child(n+2),
.cmp-table td:nth-child(n+2) { width: 19%; }
.cmp-table thead th {
font-family: var(--display);
text-align: left;
font-size: 1.2rem;
letter-spacing: -0.018em;
font-weight: 800;
line-height: 1.3;
color: var(--fg);
padding: 1.5rem 1.5rem;
background: transparent;
background-image: var(--hl-h);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 4px;
}
.cmp-score {
font-family: var(--mono);
font-size: 0.8rem;
color: var(--fg-muted);
margin-left: 0.5rem;
}
.cmp-table tbody td {
padding: 1.4rem 1.5rem;
font-family: var(--display);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.018em;
vertical-align: middle;
background-image: var(--hl-h);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 4px;
}
.cmp-table tbody tr:last-child td { background-image: none; }
/* continuous vertical hand-drawn separators across the full table height */
.cmp-table-wrap { position: relative; }
.cmp-grid-overlay {
position: absolute;
top: 1.5rem;
bottom: 1.5rem;
left: 0;
right: 0;
width: 100%;
height: calc(100% - 3rem);
pointer-events: none;
}
.cmp-grid-overlay path {
fill: none;
stroke: #8B91A8;
stroke-width: 1.2;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.cmp-layer {
font-family: var(--display);
font-size: 1.2rem;
font-weight: 600;
letter-spacing: -0.018em;
color: rgba(62, 144, 255, 0.75);
}
.cmp-cell { color: var(--fg-soft); font-weight: 500; }
.cmp-cell.ton { color: var(--fg); font-weight: 700; }
.cmp-cell.partial { color: var(--blue); font-weight: 600; font-style: italic; }
.cmp-cell.empty { color: var(--fg-dim); font-weight: 400; }
/* highlight TON column with a subtle tint */
.cmp-table thead th:nth-child(2),
.cmp-table tbody td:nth-child(2) {
background-color: rgba(62, 144, 255, 0.04);
}
.cmp-table thead th:nth-child(2) { color: var(--fg); }
.cmp-table thead th:nth-child(2) .cmp-score { color: var(--blue); font-weight: 700; }
/* === CTA === */
.section-cta {
padding-top: clamp(7rem, 10vw, 9rem);
padding-bottom: clamp(7rem, 10vw, 9rem);
text-align: center;
position: relative;
z-index: 1;
}
.section-cta .section-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.section-cta h2 {
font-size: clamp(2.2rem, 4vw + 0.5rem, 3.5rem);
}
.section-cta p { margin-bottom: 2rem; max-width: 640px; }
.cta-action {
display: flex;
align-items: center;
justify-content: center;
gap: 1.4rem;
position: relative;
margin-top: 1.5rem;
}
.cta-arrow {
width: 88px;
height: auto;
flex-shrink: 0;
color: var(--blue);
transform: translateY(14px);
}
.cta-arrow path { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cta-sparkles {
width: 64px;
height: auto;
flex-shrink: 0;
color: var(--blue);
transform: translateY(-6px);
}
.cta-sparkles path { fill: currentColor; }
.cta-sparkles path.outline { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.section-cta .hero-ctas { padding-bottom: 0; margin-top: 1rem; }
.cta-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.cta-buttons .btn {
width: 240px;
justify-content: center;
}
/* === FOOTER (legacy) === */
.footer {
padding: 3.5rem 2rem;
}
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
align-items: start;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--blue);
text-decoration: none;
margin-bottom: 1.2rem;
}
.footer-logo-mark {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.footer-logo-mark svg {
width: 100%;
height: auto;
display: block;
}
.footer-logo-text {
font-family: var(--display);
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.018em;
color: var(--fg);
white-space: nowrap;
}
.footer-heading {
font-family: var(--display);
font-size: 1rem;
font-weight: 800;
text-transform: none;
letter-spacing: -0.018em;
color: var(--fg);
padding: 0.55rem 0;
margin: 0;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0;
}
.footer-links a {
font-family: var(--display);
font-weight: 500;
font-size: 1rem;
color: var(--fg);
text-decoration: none;
padding: 0.55rem 0;
letter-spacing: -0.012em;
transition: color 0.15s;
}
.footer-links a:hover { color: var(--blue); }
.footer-tagline {
font-family: var(--display);
font-weight: 400;
font-size: 0.95rem;
color: var(--fg-muted);
line-height: 1.55;
letter-spacing: 0;
word-spacing: 0.05em;
white-space: normal;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.footer-link {
font-family: var(--display);
font-weight: 500;
font-size: 1rem;
color: var(--fg);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0;
letter-spacing: -0.012em;
transition: color 0.15s;
}
.footer-link:hover { color: var(--blue); }
.footer-link-head {
font-weight: 800;
letter-spacing: -0.018em;
}
.caret {
display: inline-block;
width: 10px;
height: 10px;
border-right: 1.8px solid currentColor;
border-bottom: 1.8px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
margin-left: 0.1rem;
}
.footer-col-social {
display: flex;
flex-direction: row;
gap: 0.6rem;
align-items: center;
padding-top: 0.5rem;
}
.footer-social {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--fg);
text-decoration: none;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.footer-social:hover {
color: var(--blue);
border-color: var(--blue);
}
.footer-social svg { width: 18px; height: 18px; }
/* ============================================================================
FOOTER BIGNAME — SVG outline + cursor spotlight that fills with blue
============================================================================ */
.footer { padding-bottom: 0; }
.footer-bigname {
position: relative;
width: 100%;
margin-top: 4rem;
height: clamp(60px, 12vw, 220px);
overflow: hidden;
user-select: none;
--mx: 50%;
--my: 50%;
}
.bigname-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
display: block;
pointer-events: none;
}
.bigname-svg text {
font-family: var(--display);
font-weight: 800;
}
.bigname-svg.outline text {
fill: var(--bg);
stroke: var(--blue);
stroke-width: 3;
paint-order: stroke fill;
stroke-linejoin: round;
stroke-linecap: round;
}
.bigname-svg.fill {
opacity: 0;
-webkit-mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
mask-image: radial-gradient(circle 280px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 100%);
transition: opacity 0.25s ease;
}
.bigname-svg.fill text {
fill: var(--blue);
}
.footer-bigname:hover .bigname-svg.fill { opacity: 1; }
/* === SCROLL REVEAL === */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* === ACCESSIBILITY === */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 900px) {
.nav { padding: 1rem 1.5rem; }
.nav-links { display: none; }
.hero { padding: 3rem 1.5rem 0; }
.cluster { height: 320px; }
.pos-1 { --w: 64px; }
.pos-2 { --w: 72px; }
.pos-3 { --w: 80px; }
.pos-4 { --w: 130px; }
.pos-5 { --w: 88px; }
.pos-6 { --w: 72px; }
.pos-7 { --w: 76px; }
.dec-blob { width: 120px; height: 120px; }
.hero-ctas { flex-direction: column; align-items: center; }
.flow { grid-template-columns: 1fr; }
.cmp-table { min-width: 640px; }
}
@media (max-width: 700px) {
.section { padding: 3.6rem 1.5rem; }
.cmp-table thead th,
.cmp-table tbody td { padding: 0.8rem 0.9rem; }
.cmp-layer { font-size: 0.68rem; }
.footer-inner { flex-direction: column; gap: 2rem; }
.hero-sub { font-size: 1.25rem; }
}
@media (max-width: 520px) {
.nav { padding: 0.9rem 1.1rem; }
.nav-logo { font-size: 1.2rem; }
.nav-cta { padding: 0.65rem 1.1rem; font-size: 0.85rem; }
.hero { padding: 2.5rem 1.1rem 0; }
.btn { width: 100%; justify-content: center; }
.hero-ctas { width: 100%; flex-direction: column; }
}
/* ============================================================================
HOW IT WORKS — original compact glass-card layout
============================================================================ */
#how .section-inner {
max-width: var(--max-w-text);
text-align: left;
}
#how h2 {
font-family: var(--display);
font-size: 1.25rem;
font-weight: 600;
text-align: center;
margin: 0 0 24px;
max-width: none;
color: var(--fg);
letter-spacing: 0;
line-height: 1.3;
}
.info {
background: rgba(245, 240, 224, 0.05);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
position: relative;
overflow: hidden;
}
.info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(245, 240, 224, 0.3), transparent);
}
.how-it-works-grid {
display: grid;
gap: 20px;
margin-top: 20px;
}
.step-item {
display: flex;
gap: 16px;
align-items: flex-start;
text-align: left;
}
.step-content h3 {
font-family: var(--display);
font-size: 1rem;
font-weight: 600;
color: var(--fg);
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.step-content p {
font-family: var(--body);
font-size: 0.9rem;
font-weight: 400;
color: var(--fg-muted);
line-height: 1.5;
margin: 0;
padding-left: 8px;
border-left: 2px solid var(--border-strong);
letter-spacing: 0;
}
@media (max-width: 700px) {
.info { padding: 24px; }
.step-item { gap: 12px; }
.step-content h3 { font-size: 0.95rem; }
.step-content p { font-size: 0.85rem; }
}
/* ============================================================================
SEARCH BOX — gateway input
============================================================================ */
.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;
}
.search-box {
max-width: 640px;
margin: 3rem auto 0;
}
.search-form {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--bg-alt);
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 0.4rem 0.4rem 0.4rem 1.8rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form:focus-within {
border-color: var(--blue);
box-shadow: 0 0 0 4px rgba(62, 144, 255, 0.12);
}
.search-form input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
color: var(--fg);
font-family: var(--display);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: -0.012em;
padding: 0.95rem 0;
outline: none;
}
.search-form input::placeholder {
color: var(--fg-muted);
font-weight: 400;
}
.search-form .btn {
padding: 0.85rem 1.5rem;
font-size: 0.95rem;
flex-shrink: 0;
}
@media (max-width: 520px) {
.search-form {
flex-direction: column;
border-radius: 24px;
padding: 0.6rem;
gap: 0.6rem;
}
.search-form input {
width: 100%;
padding: 0.6rem 0.8rem;
}
.search-form .btn {
width: 100%;
justify-content: center;
}
}