/*
Theme Name: WP Designers Pro
Theme URI: https://wpdesigners.pro
Author: Billy Aguana
Author URI: https://nullstandard.com
Description: Static one-page homepage theme for WP Designers Pro. No dependencies, no page editing: all copy lives in index.php.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-designers-pro
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--accent: #2F3BD6;
	--accent-soft: #EEF0FB;
	--ink: #16181D;
	--ink-2: #4A4F5B;
	--ink-3: #5A5F6B;
	--line: #C9CDD6;
	--line-soft: #E4E6EC;
	--surface: #F4F5F8;
	--surface-2: #EEF0F5;
	--white: #FFFFFF;
	--dark: #16181D;
	--dark-2: #1E2027;
	--dark-line: #2E323B;
	--on-dark: #C7CAD3;
	--font-display: 'Bricolage Grotesque', sans-serif;
	--font-body: Inter, system-ui, sans-serif;
	--wrap: 1200px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--accent); }
img, svg { display: block; }
input, select, textarea, button { font: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding-top: 112px; padding-bottom: 112px; }
.bg-surface { background: var(--surface); }

.eyebrow {
	font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--accent);
}
.label {
	font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--ink-3);
}
.display, .h2, .h3 { font-family: var(--font-display); }
.display {
	font-weight: 700; font-size: clamp(40px, 6vw, 64px);
	line-height: 1.04; letter-spacing: -0.025em;
}
.h2 {
	font-weight: 700; font-size: clamp(34px, 4.4vw, 48px);
	line-height: 1.08; letter-spacing: -0.02em;
}
.h3 { font-weight: 600; font-size: 21px; line-height: 1.25; }
.lead { font-size: 19px; color: var(--ink-2); }
.muted { color: var(--ink-2); }

.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }

/* Buttons */
.btn {
	display: inline-block; text-decoration: none; font-weight: 600;
	padding: 16px 28px; border-radius: 10px; line-height: 1.4;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { color: var(--white); filter: brightness(1.1); }
.btn-outline { color: var(--ink); border: 1px solid var(--line); padding: 15px 27px; background: var(--white); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { color: var(--accent); }

/* Placeholders (swap for real images) */
.placeholder {
	border-radius: 16px; background: #E6E8EF; border: 1px dashed #A9AEBB;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; text-align: center; color: var(--ink-2); font-size: 15px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { border-bottom: 1px solid var(--line-soft); }
.site-header .wrap {
	padding-top: 20px; padding-bottom: 20px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark {
	width: 28px; height: 28px; border-radius: 6px; background: var(--accent);
	display: flex; align-items: center; justify-content: center;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.main-nav a { text-decoration: none; }
.main-nav .nav-cta { color: var(--white); padding: 12px 20px; border-radius: 8px; background: var(--accent); }
.main-nav .nav-cta:hover { color: var(--white); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	padding-top: 96px; padding-bottom: 112px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 64px;
}
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-sub { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }

.hero-art {
	flex: 1 1 420px; min-width: 0; height: 520px; border-radius: 20px; position: relative; overflow: hidden;
	background-color: var(--surface-2);
	background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px);
	background-size: 20px 20px;
}
.mock-page {
	position: absolute; top: 48px; left: 40px; right: 72px; bottom: 56px;
	background: var(--white); border-radius: 12px; overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 2px 4px rgba(22,24,29,.06), 0 24px 48px rgba(22,24,29,.12);
}
.mock-bar {
	height: 34px; display: flex; align-items: center; justify-content: space-between;
	padding: 0 16px; border-bottom: 1px solid var(--surface-2);
}
.mock-bar .l, .mock-bar .r { display: flex; align-items: center; }
.mock-bar .l { gap: 6px; }
.mock-bar .r { gap: 10px; }
.mock-body { flex: 1 1 auto; display: flex; gap: 18px; padding: 26px 20px 18px; }
.mock-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 9px; }
.mock-img { flex: 1 1 0; border-radius: 8px; background: #E3E6F2; overflow: hidden; }
.mock-img svg { width: 100%; height: 100%; }
.mock-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; }
.mock-row span { height: 54px; border-radius: 6px; background: var(--surface); }

.bar { display: block; border-radius: 3px; }
.bar.ink { background: var(--ink); }
.bar.line { background: var(--line); }
.bar.accent { background: var(--accent); }

.style-card {
	position: absolute; right: 22px; top: 150px; width: 150px; padding: 14px;
	background: var(--white); border-radius: 10px;
	display: flex; flex-direction: column; gap: 10px; font-size: 11px; color: var(--ink-2);
	box-shadow: 0 2px 4px rgba(22,24,29,.06), 0 16px 32px rgba(22,24,29,.14);
}
.style-card .t { font-weight: 600; color: var(--ink); font-size: 12px; }
.swatches { display: flex; gap: 6px; }
.swatches span { width: 24px; height: 24px; border-radius: 6px; }
.style-card .rowline { display: flex; gap: 8px; border-top: 1px solid var(--surface-2); padding-top: 8px; }
.style-card .aa { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); line-height: 1; }
.steps-scale { display: flex; align-items: flex-end; gap: 4px; }
.steps-scale span { background: var(--accent); }

.brief-pill {
	position: absolute; left: 22px; bottom: 26px;
	display: flex; align-items: center; gap: 8px;
	background: var(--dark); color: var(--white); border-radius: 999px;
	padding: 8px 14px 8px 8px; font-size: 12px; font-weight: 500;
	box-shadow: 0 12px 24px rgba(22,24,29,.2);
}
.brief-pill .tick {
	width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
	display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   Why people, not AI
   ========================================================================== */
.why .wrap { display: flex; flex-direction: column; gap: 64px; }
.why-head { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.why-head .copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.why-head .placeholder { flex: 1 1 380px; min-width: 0; height: 340px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); gap: 20px; }
.feature {
	background: var(--white); border-radius: 14px; padding: 28px;
	display: flex; flex-direction: column; gap: 14px;
}
.feature p { font-size: 15.5px; color: var(--ink-2); }

.icon { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ==========================================================================
   How it works + form
   ========================================================================== */
.how { display: flex; flex-direction: column; gap: 56px; }
.how-body { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.steps { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.steps li { display: flex; gap: 20px; }
.step-icon {
	flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--accent-soft);
	display: flex; align-items: center; justify-content: center;
}
.step-text { display: flex; flex-direction: column; gap: 6px; }
.step-text .h3 { font-size: 22px; }
.step-text p:last-child { color: var(--ink-2); }

.mockup-form {
	flex: 1 1 460px; min-width: 0; padding: 36px; border-radius: 18px;
	border: 1px solid var(--line-soft); background: var(--white);
	box-shadow: 0 1px 2px rgba(22,24,29,.04), 0 12px 32px rgba(22,24,29,.06);
	display: flex; flex-direction: column; gap: 18px;
}
.mockup-form .h3 { font-size: 24px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field label .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
	border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--ink);
}
.field input, .field select { height: 48px; padding: 0 14px; }
.field select { padding: 0 12px; }
.field textarea { padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.mockup-form button {
	height: 54px; border: 0; border-radius: 10px; color: var(--white);
	font-weight: 600; font-size: 16px; cursor: pointer; background: var(--accent);
}
.mockup-form button:hover { filter: brightness(1.1); }

/* ==========================================================================
   Designs
   ========================================================================== */
.designs .wrap { display: flex; flex-direction: column; gap: 40px; }
.designs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.designs-head .section-head { max-width: 640px; }
.designs-head .btn { padding: 14px 22px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters button {
	min-height: 44px; padding: 0 18px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--white); color: var(--ink);
	font-weight: 500; font-size: 15px; cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 14px; }
.card:hover { color: var(--ink); }
.card-frame { border-radius: 14px; overflow: hidden; background: var(--white); border: 1px solid var(--line-soft); }
.card-chrome {
	height: 32px; display: flex; align-items: center; gap: 6px;
	padding: 0 14px; border-bottom: 1px solid var(--line-soft);
}
.card-chrome span { width: 9px; height: 9px; border-radius: 50%; background: #D3D6DE; }
.card-shot { height: 230px; display: flex; flex-direction: column; overflow: hidden; background: var(--c-bg); }
.card-nav { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.card-nav .brandname { font-family: var(--c-font); font-weight: 700; font-size: 11px; color: var(--c-ink); }
.card-nav .links { display: flex; gap: 8px; align-items: center; }
.card-nav .links span { width: 18px; height: 4px; border-radius: 2px; background: var(--c-ink); opacity: .3; }
.card-nav .links .cta { width: 34px; height: 12px; border-radius: 3px; background: var(--c-accent); opacity: 1; }
.card-body { flex: 1 1 auto; display: flex; gap: 14px; padding: 14px 16px 16px; }
.card-body .txt { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; }
.card-body .hl { font-family: var(--c-font); font-weight: 700; font-size: 17px; line-height: 1.15; color: var(--c-ink); }
.card-body .ln { height: 4px; border-radius: 2px; background: var(--c-ink); opacity: .25; }
.card-body .btnbar { width: 58px; height: 16px; border-radius: 4px; margin-top: 6px; background: var(--c-accent); }
.card-body .pic { flex: 1 1 0; border-radius: 8px; background: var(--c-tint); overflow: hidden; }
.card-body .pic svg { width: 100%; height: 100%; }
.card-body .pic svg * { fill: var(--c-accent); }
.card-label { font-weight: 600; font-size: 16px; }

/* Per-card palettes */
.c-pro    { --c-bg:#F7F5F0; --c-ink:#1F2A37; --c-accent:#1F4E79; --c-tint:#E3E8EF; --c-font:Georgia,'Times New Roman',serif; }
.c-home   { --c-bg:#FFFFFF; --c-ink:#1B1D22; --c-accent:#D9622B; --c-tint:#FBE7DC; --c-font:'Bricolage Grotesque',sans-serif; }
.c-health { --c-bg:#F1F7F5; --c-ink:#17332D; --c-accent:#2E8B74; --c-tint:#D7EBE5; --c-font:Inter,sans-serif; }
.c-estate { --c-bg:#FFFFFF; --c-ink:#20232A; --c-accent:#8A6A3B; --c-tint:#EFE7DB; --c-font:Georgia,'Times New Roman',serif; }
.c-food   { --c-bg:#22201E; --c-ink:#F5EFE6; --c-accent:#E0A33A; --c-tint:#3A342E; --c-font:Georgia,'Times New Roman',serif; }
.c-tech   { --c-bg:#F5F6FF; --c-ink:#14162B; --c-accent:#5B5BD6; --c-tint:#E2E3FA; --c-font:'Bricolage Grotesque',sans-serif; }

/* ==========================================================================
   Developer-ready
   ========================================================================== */
.devready { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.devready .copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.checklist { display: flex; flex-direction: column; gap: 16px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .icon { margin-top: 2px; }
.checklist strong { font-weight: 600; }

.figma-art {
	flex: 1 1 460px; min-width: 0; height: 480px; border-radius: 16px;
	background: var(--dark-2); display: flex; overflow: hidden; font-size: 12px; color: #9EA3AF;
}
.layers {
	flex: none; width: 150px; border-right: 1px solid var(--dark-line);
	padding: 16px 14px; display: flex; flex-direction: column; gap: 9px;
}
.layers .t { font-weight: 600; color: var(--white); padding-bottom: 6px; }
.layers .grp { color: var(--white); }
.layers .grp.gap { padding-top: 6px; }
.layers .sub { padding-left: 14px; }
.panels { flex: 1 1 auto; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.panel {
	background: var(--white); border-radius: 10px; padding: 16px;
	display: flex; flex-direction: column; gap: 8px; color: var(--ink-2);
}
.panel .t { font-weight: 600; color: var(--ink); }
.panel-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.panel-colors div { display: flex; flex-direction: column; gap: 4px; }
.panel-colors span:first-child { height: 36px; border-radius: 6px; }
.type-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.type-row .d { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.panel-pair { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; }
.panel-pair .panel { flex: 1 1 0; }
.space-row { display: flex; align-items: center; gap: 8px; }
.space-row span:first-child { height: 10px; background: var(--accent); }
.chip { align-self: flex-start; padding: 7px 12px; border-radius: 6px; font-weight: 600; }
.chip-primary { color: var(--white); background: var(--accent); }
.chip-secondary { color: var(--ink); border: 1px solid var(--line); padding: 6px 11px; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing .wrap { display: flex; flex-direction: column; gap: 48px; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.price {
	background: var(--white); border-radius: 16px; padding: 32px 28px;
	display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line-soft);
}
.price.featured { border: 2px solid var(--accent); }
.price.featured .label { color: var(--accent); }
.price .h3 { font-size: 22px; }
.price .amount { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; }
.price .desc { font-size: 15.5px; color: var(--ink-2); flex-grow: 1; }
.price .time { font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--line-soft); padding-top: 14px; }
.price-notes { display: flex; flex-wrap: wrap; gap: 20px; }
.price-notes .terms { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.guarantee {
	flex: 1 1 400px; min-width: 0; display: flex; gap: 16px; align-items: flex-start;
	background: var(--white); border-radius: 14px; padding: 22px 24px; font-size: 15.5px;
}
.guarantee strong { font-weight: 600; }

/* ==========================================================================
   Need it built
   ========================================================================== */
.build { background: var(--dark); color: var(--white); }
.build .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.build .copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.build .eyebrow { color: #B9BFF5; }
.build .lead { color: var(--on-dark); }
.build .note { font-size: 16px; color: var(--on-dark); }
.perks { display: flex; flex-wrap: wrap; gap: 12px; }
.perks li { padding: 10px 16px; border-radius: 999px; border: 1px solid #3A3E48; font-size: 15px; }

.build-art {
	flex: 1 1 460px; min-width: 0; height: 420px; border-radius: 16px; position: relative; overflow: hidden;
	background-color: var(--dark-2);
	background-image: linear-gradient(#262932 1px, transparent 1px), linear-gradient(90deg, #262932 1px, transparent 1px);
	background-size: 24px 24px;
}
.frame-design, .frame-live { position: absolute; top: 70px; width: 40%; height: 260px; border-radius: 10px; }
.frame-design {
	left: 6%; border: 1.5px dashed #6B7080; padding: 18px;
	display: flex; flex-direction: column; gap: 10px;
}
.frame-tag { position: absolute; top: -24px; left: 0; font-size: 12px; color: #9EA3AF; }
.frame-design .bar.g1 { background: #6B7080; }
.frame-design .bar.g2 { background: #9EA3AF; }
.spec { display: flex; align-items: center; gap: 6px; color: #F2A27A; font-size: 11px; font-weight: 600; }
.spec span { flex: 1 1 auto; border-top: 1.5px solid #F2A27A; }
.frame-design .btn-ghost { width: 60px; height: 18px; border-radius: 4px; border: 1.5px dashed #9EA3AF; }
.frame-design .area { flex: 1 1 auto; border-radius: 6px; border: 1.5px dashed #6B7080; }
.build-arrow { position: absolute; left: 48%; top: 186px; width: 6%; display: flex; justify-content: center; }
.frame-live {
	right: 6%; background: var(--white); overflow: visible;
	display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.frame-live .chrome {
	height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 10px;
	background: var(--surface); border-bottom: 1px solid var(--line-soft); border-radius: 10px 10px 0 0;
}
.frame-live .chrome .dot { width: 7px; height: 7px; border-radius: 50%; background: #D3D6DE; }
.frame-live .chrome .url { flex: 1 1 auto; height: 10px; border-radius: 5px; margin-left: 8px; background: var(--white); border: 1px solid var(--line-soft); }
.frame-live .inner { flex: 1 1 auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.frame-live .area { flex: 1 1 auto; border-radius: 6px; background: #E3E6F2; }

/* ==========================================================================
   Team
   ========================================================================== */
.team { display: flex; flex-direction: column; gap: 48px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.person { display: flex; flex-direction: column; gap: 14px; }
.person .placeholder { aspect-ratio: 4 / 5; border-radius: 14px; background: var(--surface-2); font-size: 14px; padding: 20px; }
.person .name { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.person .role { font-size: 15px; color: var(--ink-3); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line-soft); }
.faq .wrap { display: flex; flex-wrap: wrap; gap: 64px; }
.faq .h2 { flex: 1 1 280px; }
.faq-list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.faq-item p { color: var(--ink-2); }

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.closing { padding: 0 24px 112px; }
.closing-box {
	max-width: var(--wrap); margin: 0 auto; border-radius: 24px; padding: 72px 56px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
	background: var(--accent); color: var(--white);
}
.closing-box .copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.closing-box .lead { color: #E6E8FB; }
.sketch { flex: 1 1 340px; min-width: 0; height: 300px; position: relative; }
.sketch .back {
	position: absolute; inset: 18px 30px 6px 10px; border-radius: 6px;
	background: rgba(255,255,255,.28); transform: rotate(-4deg);
}
.sketch .paper {
	position: absolute; inset: 6px 14px 18px 22px; border-radius: 6px; overflow: hidden;
	background: var(--white); transform: rotate(2deg); box-shadow: 0 20px 40px rgba(0,0,0,.2);
	background-image: linear-gradient(#E9ECF6 1px, transparent 1px); background-size: 100% 22px;
}
.sketch .paper svg { width: 100%; height: 100%; }
.sketch .scribble {
	position: absolute; right: 18px; top: 74px; transform: rotate(-6deg);
	font-size: 13px; font-weight: 600; color: var(--accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--dark); color: var(--on-dark); }
.site-footer .wrap { padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: #B9BFF5; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 360px; font-size: 15px; }
.footer-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--white); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 15px; }
.footer-nav a { text-decoration: none; }
.footer-bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
	padding-top: 24px; border-top: 1px solid var(--dark-line); font-size: 14px;
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 760px) {
	.section { padding-top: 72px; padding-bottom: 72px; }
	.hero { padding-top: 56px; padding-bottom: 72px; gap: 48px; }
	.main-nav { gap: 16px 20px; }
	.hero-art { height: 420px; }
	.style-card { display: none; }
	.mock-page { right: 40px; }
	.figma-art { height: auto; }
	.layers { display: none; }
	.build-art { height: 320px; }
	.frame-design, .frame-live { top: 40px; height: 220px; }
	.build-arrow { top: 140px; }
	.mockup-form { padding: 24px; }
	.closing { padding-bottom: 72px; }
	.closing-box { padding: 48px 24px; }
	.card-grid { grid-template-columns: 1fr; }
}