/* ============================================================
StrategyLab — Design System
Cold white / vibrant indigo / night blue.
Floating nav / cards / icons carry the motion language.
============================================================ */
/* Fonts are loaded via + in each page's
(faster than @import — the browser can start fetching before this file finishes parsing). */
:root {
/* ---- Core palette ----
Blanc froid #E9E9F4 · Indigo vibrant #3424B0 · Bleu nuit #0D092C */
--paper: #E9E9F4;
--paper-raised: #FFFFFF;
--ink: #0D092C;
--ink-soft: #44415E;
--ink-faint: #65637C;
--mist: #E9E9EC;
--mist-2: #DBDADF;
--deep: #0D092C;
--deep-raised: #150E46;
--deep-raised-2: #191256;
--deep-line: rgba(233, 233, 244, 0.10);
--on-deep: #E9E9F4;
--on-deep-soft: rgba(233, 233, 244, 0.66);
--on-deep-faint: rgba(233, 233, 244, 0.44);
--accent: #3424B0;
--accent-deep: #2A1D8F;
--accent-bright: #A594F5;
--accent-pale: rgba(52, 36, 176, 0.08);
--accent-pale-deep: rgba(165, 148, 245, 0.16);
--accent-ring: rgba(52, 36, 176, 0.28);
--whatsapp: #0E7A42;
--coral: #C74722;
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 26px;
--radius-pill: 999px;
--shadow-xs: 0 1px 2px rgba(13, 9, 44, 0.06);
--shadow-card: 0 1px 1px rgba(13, 9, 44, 0.05), 0 14px 28px -12px rgba(13, 9, 44, 0.16);
--shadow-card-hover: 0 4px 10px rgba(13, 9, 44, 0.07), 0 26px 44px -14px rgba(13, 9, 44, 0.22);
--shadow-nav: 0 10px 30px -8px rgba(13, 9, 44, 0.18), 0 2px 10px rgba(13, 9, 44, 0.07);
--shadow-deep-card: 0 1px 1px rgba(0, 0, 0, 0.25), 0 18px 34px -14px rgba(0, 0, 0, 0.55);
--container: 1160px;
--container-wide: 1280px;
--section-y: clamp(4.5rem, 8vw, 7.5rem);
--gutter: clamp(1.25rem, 5vw, 2.5rem);
--nav-h: 64px;
--font-display: 'Sora', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-float: cubic-bezier(0.45, 0, 0.2, 1);
}
/* ============================================================
Reset / base
============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
background: var(--ink);
color: var(--paper);
padding: 0.6rem 1rem;
border-radius: var(--radius-sm);
z-index: 200;
transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }
:focus-visible {
outline: 2.5px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
#home, #services, #why-us, #pricing, #portfolio, #contact {
scroll-margin-top: 100px;
}
.section-pad { padding: var(--section-y) 0; }
.section-dark {
background-color: var(--deep);
background-image: radial-gradient(rgba(233, 233, 244, 0.06) 1px, transparent 1px);
background-size: 26px 26px;
color: var(--on-deep);
}
.section-dark .eyebrow { color: var(--accent-bright); }
.section-dark .section-title { color: var(--on-deep); }
.section-dark .section-sub { color: var(--on-deep-soft); }
/* ============================================================
Typography
============================================================ */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-deep);
}
.eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 0 3px var(--accent-pale);
}
.section-head {
max-width: 640px;
margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.section-head.center { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }
.section-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.85rem, 3.4vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
margin-top: 0.6rem;
}
.section-sub {
margin-top: 0.9rem;
font-size: 1.05rem;
line-height: 1.6;
color: var(--ink-soft);
}
/* Single accent-color utility, reused by both the hero copy and the translated
_html strings in locales/*.json (which carry this exact class name inline). */
.accent { color: var(--accent); }
.section-dark .accent { color: var(--accent-bright); }
/* ============================================================
Buttons
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55em;
padding: 0.85rem 1.5rem;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
border: 1.5px solid transparent;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s, border-color 0.2s, color 0.2s;
white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
color: #fff;
box-shadow: 0 1px 1px rgba(42, 29, 143, 0.3), 0 12px 24px -10px rgba(52, 36, 176, 0.55);
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(42, 29, 143, 0.3), 0 18px 30px -10px rgba(52, 36, 176, 0.6); }
.btn-outline {
background: transparent;
color: var(--ink);
border-color: var(--mist-2);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); }
.section-dark .btn-outline { color: var(--on-deep); border-color: var(--deep-line); }
.section-dark .btn-outline:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.btn-whatsapp {
background: var(--whatsapp);
color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 12px 22px -10px rgba(14, 122, 66, 0.55);
}
.btn-whatsapp:hover { background: #0B5F34; transform: translateY(-2px); }
.btn-ghost {
background: var(--accent-pale);
color: var(--accent-deep);
}
.btn-ghost:hover { background: var(--accent-ring); }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }
/* ============================================================
Floating navbar
============================================================ */
.nav-float-outer {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: center;
padding: 14px var(--gutter) 0;
pointer-events: none;
}
.nav-float {
pointer-events: auto;
width: 100%;
max-width: 1080px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0.6rem 0.5rem 1.1rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: var(--shadow-nav);
transition: box-shadow 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}
.nav-float-outer.is-scrolled .nav-float {
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 14px 34px -10px rgba(13, 9, 44, 0.22), 0 2px 8px rgba(13, 9, 44, 0.08);
}
.brand { display: flex; align-items: center; gap: 0.55rem; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.brand-word {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--ink);
}
.brand-word span { color: var(--accent); }
.nav-links {
display: flex;
align-items: center;
gap: 1.9rem;
}
.nav-links a {
font-size: 0.92rem;
font-weight: 500;
color: var(--ink-soft);
transition: color 0.2s;
}
.nav-links a:hover { color: var(--accent-deep); }
.nav-locale {
display: flex;
align-items: center;
gap: 0.35rem;
margin-right: 0.15rem;
}
.nav-locale select {
appearance: none;
-webkit-appearance: none;
background: var(--accent-pale);
color: var(--accent-deep);
border: 1px solid transparent;
border-radius: var(--radius-pill);
padding: 0.4rem 1.6rem 0.4rem 0.75rem;
font-size: 0.78rem;
font-weight: 600;
font-family: var(--font-mono);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1.5L5 5.5L9 1.5' stroke='%230B5A54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.65rem center;
cursor: pointer;
transition: background-color 0.2s;
}
.nav-locale select:hover { background-color: var(--accent-ring); }
.nav-locale select:focus-visible { outline-offset: 2px; }
.nav-cta { display: flex; align-items: center; gap: 0.5rem; }
.nav-menu-btn {
display: none;
width: 40px;
height: 40px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--accent-pale);
border: none;
flex: none;
}
.nav-menu-btn svg { width: 19px; height: 19px; color: var(--accent-deep); }
.nav-mobile {
position: fixed;
top: calc(var(--nav-h) + 18px);
left: var(--gutter);
right: var(--gutter);
z-index: 99;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-nav);
border: 1px solid var(--mist);
padding: 1.25rem;
display: none;
flex-direction: column;
gap: 0.15rem;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.nav-mobile.is-open { display: flex; opacity: 1; transform: translateY(0); }
.nav-mobile a {
padding: 0.85rem 0.75rem;
border-radius: var(--radius-sm);
font-weight: 500;
color: var(--ink);
font-size: 1.02rem;
}
.nav-mobile a:hover { background: var(--accent-pale); }
.nav-mobile-locale {
display: flex;
gap: 0.6rem;
padding: 0.85rem 0.75rem 0.25rem;
}
.nav-mobile-locale select {
flex: 1;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid var(--mist-2);
background: var(--paper);
font-size: 0.9rem;
font-family: var(--font-mono);
}
.nav-mobile .btn { margin: 0.6rem 0.75rem 0.25rem; }
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-locale { display: none; }
.nav-menu-btn { display: flex; }
.nav-cta .btn span.long { display: none; }
}
@media (min-width: 901px) {
.nav-mobile { display: none !important; }
}
/* ============================================================
Floating motion system
============================================================ */
.floaty-wrap {
animation: floatIdle 7s ease-in-out infinite;
animation-delay: var(--delay, 0s);
will-change: transform;
}
@keyframes floatIdle {
0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
50% { transform: translateY(-12px) rotate(var(--rot, 0deg)); }
}
.icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 13px;
background: var(--accent-pale);
flex: none;
transition: transform 0.25s var(--ease-out);
}
.icon-badge svg { width: 22px; height: 22px; color: var(--accent-deep); }
.section-dark .icon-badge { background: var(--accent-pale-deep); }
.section-dark .icon-badge svg { color: var(--accent-bright); }
/* ============================================================
Cards (context-aware: light default, .section-dark overrides)
============================================================ */
.card {
background: var(--paper-raised);
border: 1px solid var(--mist);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: var(--mist-2); }
.section-dark .card {
background: var(--deep-raised);
border-color: var(--deep-line);
box-shadow: var(--shadow-deep-card);
}
.section-dark .card:hover { border-color: rgba(165, 148, 245, 0.35); }
/* ============================================================
Hero
============================================================ */
.hero { padding: calc(var(--nav-h) + 3.5rem) 0 4rem; overflow: clip; }
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 5vw, 3rem);
align-items: center;
}
.hero-copy { max-width: 560px; }
.hero-title {
margin-top: 1.1rem;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.3rem, 4.6vw, 3.5rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink);
}
.hero-sub {
margin-top: 1.35rem;
font-size: 1.13rem;
line-height: 1.6;
color: var(--ink-soft);
max-width: 480px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero-trust {
margin-top: 2.25rem;
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
color: var(--ink-faint);
}
.hero-trust .avatars { display: flex; }
.hero-trust .avatars span {
width: 26px; height: 26px; border-radius: 50%;
border: 2px solid var(--paper);
background: var(--accent-pale);
margin-left: -8px;
}
.hero-trust .avatars span:first-child { margin-left: 0; }
.hero-stage {
position: relative;
height: clamp(320px, 38vw, 440px);
}
.float-card {
position: absolute;
--rot: 0deg;
}
.float-card-inner {
background: var(--paper-raised);
border: 1px solid var(--mist);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: 1rem 1.15rem;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.float-card:hover .float-card-inner { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.fc-lead { top: 4%; left: 2%; width: 220px; --rot: -4deg; }
.fc-chart { top: 38%; right: 0; width: 210px; --rot: 3deg; }
.fc-wa { bottom: 2%; left: 14%; width: 232px; --rot: -2deg; }
.fc-head { display: flex; align-items: center; gap: 0.6rem; }
.fc-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.fc-dot svg { width: 17px; height: 17px; }
.fc-title { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.fc-sub { font-size: 0.74rem; color: var(--ink-faint); margin-top: 0.1rem; }
.fc-body { margin-top: 0.7rem; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; }
.fc-lead .fc-dot { background: var(--accent-pale); color: var(--accent-deep); }
.fc-chart .fc-dot { background: rgba(199, 71, 34, 0.12); color: var(--coral); }
.fc-wa .fc-dot { background: rgba(14, 122, 66, 0.14); color: #0E7A42; }
.fc-chart-svg { margin-top: 0.6rem; width: 100%; height: 46px; }
.fc-stat { font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin-top: 0.55rem; }
.fc-stat span { color: var(--ink-faint); font-size: 0.7rem; font-weight: 500; }
.fc-bubble {
margin-top: 0.65rem;
background: var(--accent-pale);
border-radius: 12px 12px 12px 3px;
padding: 0.55rem 0.75rem;
font-size: 0.78rem;
color: var(--accent-deep);
}
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-copy { max-width: 100%; }
.hero-stage { height: 300px; margin-top: 1rem; }
.fc-lead { width: 180px; }
.fc-chart { width: 170px; }
.fc-wa { width: 190px; }
}
@media (max-width: 560px) {
.hero-stage { height: 400px; }
.fc-lead { top: 0; left: 0; }
.fc-chart { top: 34%; right: 0; }
.fc-wa { bottom: 0; left: 6%; }
}
/* ============================================================
Stats strip
============================================================ */
.stats-strip {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: clamp(2.5rem, 6vw, 4rem);
}
.stat-chip {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.75rem 1.1rem;
border-radius: var(--radius-pill);
background: var(--paper-raised);
border: 1px solid var(--mist);
box-shadow: var(--shadow-xs);
}
.stat-chip .num {
font-family: var(--font-mono);
font-weight: 600;
font-size: 1.05rem;
color: var(--accent-deep);
}
.stat-chip .label { font-size: 0.8rem; color: var(--ink-faint); }
/* ============================================================
Services
============================================================ */
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
}
.service-card {
padding: 1.9rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.service-card .icon-badge.floaty-wrap { align-self: flex-start; }
.service-card h3 {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--on-deep);
}
.service-card p { font-size: 0.93rem; color: var(--on-deep-soft); line-height: 1.6; }
.service-card .fx { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.service-card .fx span {
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 0.3rem 0.6rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.06);
color: var(--on-deep-soft);
border: 1px solid var(--deep-line);
}
.service-card .learn { font-size: 0.85rem; font-weight: 600; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 0.35em; }
.service-card .learn svg { width: 15px; height: 15px; transition: transform 0.2s; }
.service-card:hover .learn svg { transform: translateX(3px); }
@media (max-width: 720px) { .services-grid { grid-template-columns: 1fr; } }
/* ============================================================
Why-us
============================================================ */
.why-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.why-list { display: flex; flex-direction: column; gap: 1.4rem; }
.why-item { display: flex; gap: 1rem; }
.why-item .icon-badge { width: 38px; height: 38px; border-radius: 11px; margin-top: 0.1rem; }
.why-item .icon-badge svg { width: 18px; height: 18px; }
.why-item h4 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.why-item p { margin-top: 0.3rem; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.why-panel {
border-radius: var(--radius-lg);
background: var(--paper-raised);
border: 1px solid var(--mist);
box-shadow: var(--shadow-card);
padding: 2rem;
}
.why-panel .quote-mark { font-family: var(--font-display); font-size: 2.5rem; color: var(--accent); line-height: 1; }
.why-panel blockquote { font-size: 1.05rem; line-height: 1.55; color: var(--ink); margin: 0.75rem 0 0; }
.why-panel cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: 0.85rem; color: var(--ink-faint); }
.why-panel .div { height: 1px; background: var(--mist); margin: 1.5rem 0; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
/* ============================================================
Pricing
============================================================ */
.pricing-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem;
margin-bottom: 1.1rem;
}
.price-panel { padding: 2rem; }
.price-panel .pp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.price-panel h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.price-panel .pp-desc { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.price-panel .pp-amount { font-family: var(--font-mono); font-weight: 600; font-size: 1.4rem; color: var(--accent-deep); white-space: nowrap; }
.price-panel .pp-list { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.price-panel .pp-list li { display: flex; gap: 0.55rem; font-size: 0.88rem; color: var(--ink-soft); }
.price-panel .pp-list svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 0.15rem; }
.price-panel .btn { margin-top: 1.6rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.tier-card { padding: 1.9rem; display: flex; flex-direction: column; }
.tier-card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-card); }
.tier-badge {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--accent-deep);
background: var(--accent-pale);
padding: 0.3rem 0.65rem;
border-radius: var(--radius-pill);
margin-bottom: 0.9rem;
}
.tier-card h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.tier-price { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 1.55rem; font-weight: 600; color: var(--ink); }
.tier-price span { font-size: 0.8rem; font-weight: 500; color: var(--ink-faint); }
.tier-hint { margin-top: 0.6rem; font-family: var(--font-body); font-size: 0.87rem; font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
.tier-card ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.tier-card li { display: flex; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.tier-card li svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 0.15rem; }
.tier-card .btn { margin-top: 1.5rem; }
@media (max-width: 980px) { .pricing-dual, .pricing-grid { grid-template-columns: 1fr; } }
/* ============================================================
Portfolio
============================================================ */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.portfolio-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.pf-preview { position: relative; }
.pf-browser-bar {
display: flex;
gap: 5px;
padding: 10px 12px;
background: var(--deep-raised-2);
border-bottom: 1px solid var(--deep-line);
}
.pf-browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(233, 233, 244, 0.16); }
.pf-frame-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, var(--deep-raised), var(--deep-raised-2));
}
.pf-frame-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 400%;
border: 0;
transform: scale(0.25);
transform-origin: 0 0;
pointer-events: none;
}
/* Fade so a slow-loading or blocked embed never looks like a broken hole */
.pf-frame-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, var(--deep-raised) 100%);
pointer-events: none;
}
.pf-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.portfolio-card .pf-top { display: flex; align-items: center; justify-content: space-between; }
.pf-tag {
font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--on-deep-soft); border: 1px solid var(--deep-line); padding: 0.28rem 0.55rem; border-radius: var(--radius-pill);
}
.portfolio-card h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--on-deep); }
.portfolio-card p { font-size: 0.86rem; color: var(--on-deep-soft); line-height: 1.55; }
.portfolio-card .pf-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.82rem; font-weight: 600; color: var(--accent-bright); }
.portfolio-card .pf-link svg { width: 14px; height: 14px; transition: transform 0.2s; }
.portfolio-card:hover .pf-link svg { transform: translate(2px, -2px); }
@media (max-width: 980px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .portfolio-grid { grid-template-columns: 1fr; } }
/* ============================================================
Contact
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: start;
}
.contact-chan { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.6rem; }
.chan-card {
display: flex; align-items: center; gap: 0.85rem;
padding: 1rem 1.1rem;
}
.chan-card .icon-badge { width: 42px; height: 42px; border-radius: 12px; }
.chan-card .icon-badge svg { width: 20px; height: 20px; }
.chan-card .cc-title { font-size: 0.92rem; font-weight: 600; }
.chan-card .cc-sub { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.1rem; }
.form-panel { padding: clamp(1.5rem, 4vw, 2.25rem); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.9rem; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
padding: 0.75rem 0.9rem;
border-radius: var(--radius-sm);
border: 1.5px solid var(--mist-2);
background: var(--paper);
color: var(--ink);
font-size: 0.92rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-pale);
}
.field textarea { resize: vertical; min-height: 100px; }
.form-panel .btn { margin-top: 1.4rem; }
.form-note { margin-top: 0.9rem; font-size: 0.78rem; color: var(--ink-faint); }
.form-status { display: none; text-align: center; padding: 1.75rem 0.5rem; }
.form-status.is-visible { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.form-status svg { width: 42px; height: 42px; }
.form-status p { font-size: 1rem; font-weight: 600; color: var(--ink); max-width: 320px; line-height: 1.5; }
.form-status.is-success svg { color: var(--accent); }
.form-status.is-error svg { color: var(--coral); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
/* ============================================================
Footer
============================================================ */
.site-footer {
background-color: var(--deep);
background-image: radial-gradient(rgba(233, 233, 244, 0.06) 1px, transparent 1px);
background-size: 26px 26px;
color: var(--on-deep-soft);
padding: 3.5rem 0 2rem;
}
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--deep-line); }
.footer-brand .brand-word { color: var(--on-deep); }
.footer-brand p { margin-top: 0.85rem; font-size: 0.88rem; max-width: 280px; line-height: 1.6; }
.footer-cols { display: flex; gap: clamp(2rem, 6vw, 5rem); }
.footer-col h5 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-deep-faint); margin-bottom: 0.9rem; }
.footer-col a, .footer-col span { display: block; font-size: 0.88rem; margin-bottom: 0.65rem; color: var(--on-deep-soft); }
.footer-col a:hover { color: var(--accent-bright); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: 0.8rem; color: var(--on-deep-faint); }
.footer-bottom .fb-links { display: flex; gap: 1.25rem; }
@media (max-width: 700px) { .footer-top { flex-direction: column; } .footer-cols { gap: 2.5rem; flex-wrap: wrap; } }