/* ==========================================================================
   Κατασκευή Ιστοσελίδας (page-web-design.php) — "proof sheet" concept.
   Display: Sofia Sans Extra Condensed · Body: Manrope · Labels: JetBrains Mono.
   Accents are process inks (C, M, Y) used only as print marks; brand red does the selling.
   ========================================================================== */

@font-face { font-family: "Sofia XC"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(../fonts/sofia-xcond-greek.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Sofia XC"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(../fonts/sofia-xcond-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "JB Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/jbmono-greek.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "JB Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/jbmono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193; }

.wd {
	--wd-ink: #111418;
	--wd-paper: #eef0f3;
	--wd-red: var(--erp-primary, #e30a17);
	--wd-c: #00a0e3;
	--wd-m: #e5007e;
	--wd-y: #ffd400;
	--wd-display: "Sofia XC", "Arial Narrow", "Roboto Condensed", sans-serif;
	--wd-mono: "JB Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--wd-ease: cubic-bezier(.2, .8, .2, 1);
	overflow-x: clip;
	color: var(--erp-text);
}
.wd section { position: relative; }
.wd :focus-visible { outline: 3px solid var(--wd-c); outline-offset: 3px; }

/* ---------- Shared type ---------- */
.wd-eyebrow, .wd-label {
	display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
	font-family: var(--wd-mono); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--erp-muted);
}
.wd-label::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.wd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wd-red); box-shadow: 0 0 0 0 rgba(227, 10, 23, .5); animation: wd-pulse 2s infinite; }
@keyframes wd-pulse { 70% { box-shadow: 0 0 0 10px rgba(227, 10, 23, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 10, 23, 0); } }

.wd-h2 {
	margin: 0; font-family: var(--wd-display); font-weight: 900; text-transform: uppercase;
	font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem); line-height: .9; letter-spacing: -.005em; color: var(--wd-ink);
}
.wd-h2--xl { font-size: clamp(3.2rem, 1.8rem + 6vw, 7.5rem); }
/* Highlighter swipe, like a proof mark-up. */
.wd-mark { position: relative; z-index: 0; white-space: nowrap; color: inherit; }
.wd-mark::after {
	content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; bottom: .04em; height: .38em;
	background: var(--wd-red); opacity: .9; transform: scaleX(var(--wd-sx, 1)); transform-origin: left; transition: transform .9s var(--wd-ease) .2s;
}
.wd-mark { color: var(--wd-ink); }
.wd-mark--y::after { background: var(--wd-y); }
.wd-head { max-width: 860px; margin: 0 0 clamp(36px, 5vw, 64px); }
.wd-head__lead { margin: 20px 0 0; max-width: 620px; font-size: clamp(1rem, .95rem + .3vw, 1.175rem); line-height: 1.6; color: var(--erp-muted); }
.wd-head__lead a { color: var(--wd-red); font-weight: 700; }
.wd-head--side { margin: 0; }

.wd-btn { box-shadow: 4px 4px 0 var(--wd-ink); transition: transform .15s, box-shadow .15s, background .15s; }
.wd-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--wd-ink); }
.wd-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--wd-ink); }
.wd-btn--block { width: 100%; }
.wd .cg-btn .cg-icon, .wd .cg-btn svg { width: 19px; height: 19px; }

/* ---------- Print marks ---------- */
.wd-crop { position: absolute; width: 22px; height: 22px; pointer-events: none; color: var(--wd-ink); opacity: .55; }
.wd-crop::before, .wd-crop::after { content: ""; position: absolute; background: currentColor; }
.wd-crop::before { width: 22px; height: 1px; }
.wd-crop::after { width: 1px; height: 22px; }
.wd-crop--tl { top: -14px; left: -14px; } .wd-crop--tl::before { top: 13px; } .wd-crop--tl::after { left: 13px; }
.wd-crop--tr { top: -14px; right: -14px; } .wd-crop--tr::before { top: 13px; } .wd-crop--tr::after { right: 13px; }
.wd-crop--bl { bottom: -14px; left: -14px; } .wd-crop--bl::before { bottom: 13px; } .wd-crop--bl::after { left: 13px; }
.wd-crop--br { bottom: -14px; right: -14px; } .wd-crop--br::before { bottom: 13px; } .wd-crop--br::after { right: 13px; }
.wd-reg { width: 100%; height: 100%; display: block; }
.wd-colorbar { display: grid; grid-template-columns: repeat(12, 1fr); height: 14px; }
.wd-colorbar i:nth-child(1) { background: var(--wd-c); } .wd-colorbar i:nth-child(2) { background: var(--wd-m); }
.wd-colorbar i:nth-child(3) { background: var(--wd-y); } .wd-colorbar i:nth-child(4) { background: var(--wd-ink); }
.wd-colorbar i:nth-child(5) { background: color-mix(in srgb, var(--wd-c) 50%, #fff); } .wd-colorbar i:nth-child(6) { background: color-mix(in srgb, var(--wd-m) 50%, #fff); }
.wd-colorbar i:nth-child(7) { background: color-mix(in srgb, var(--wd-y) 50%, #fff); } .wd-colorbar i:nth-child(8) { background: #7a7d82; }
.wd-colorbar i:nth-child(9) { background: var(--wd-red); } .wd-colorbar i:nth-child(10) { background: #1d4fd8; }
.wd-colorbar i:nth-child(11) { background: #1f8a5b; } .wd-colorbar i:nth-child(12) { background: #d5d7dc; }

/* ---------- Browser / phone frames ---------- */
.wd-browser { position: relative; background: #fff; border: 1.5px solid var(--wd-ink); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(17, 20, 24, .45); }
.wd-browser__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1.5px solid var(--wd-ink); background: #fff; }
.wd-browser__bar i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--wd-ink); }
.wd-browser__bar i:nth-child(1) { background: var(--wd-m); } .wd-browser__bar i:nth-child(2) { background: var(--wd-y); } .wd-browser__bar i:nth-child(3) { background: var(--wd-c); }
.wd-browser__bar span { flex: 1; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--wd-paper); font-family: var(--wd-mono); font-size: .6875rem; color: var(--erp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-browser__screen, .wd-phone__screen { position: relative; overflow: hidden; background: #fff; }
.wd-browser__screen { aspect-ratio: 16 / 10; }
.wd-browser__screen img, .wd-phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Hover → scroll the whole page (duration grows with page height). */
.wd-hoverscroll img { transition: object-position calc(var(--h, 2000) * 2.4ms) cubic-bezier(.45, 0, .55, 1); }
.wd-hoverscroll:hover img, .wd-hoverscroll:focus-visible img, .wd-hoverscroll.is-scrolling img { object-position: 50% 100%; transition-duration: calc(var(--h, 2000) * 2.4ms); }
.wd-hoverscroll { cursor: ns-resize; }

/* Hero: scroll by itself, back and forth. */
.wd-autoscroll img { animation: wd-auto calc(var(--h, 2000) * 5.5ms) cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes wd-auto { 0%, 12% { object-position: 50% 0; } 88%, 100% { object-position: 50% 100%; } }

.wd-phone { position: relative; width: 100%; padding: 9px; background: var(--wd-ink); border-radius: 30px; box-shadow: 0 30px 60px -25px rgba(17, 20, 24, .55); }
.wd-phone::before { content: ""; position: absolute; z-index: 2; top: 15px; left: 50%; width: 30%; height: 14px; border-radius: 999px; background: var(--wd-ink); transform: translateX(-50%); }
.wd-phone__screen { aspect-ratio: 9 / 19; border-radius: 22px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.wd-hero {
	padding: clamp(36px, 6vw, 88px) 0 clamp(56px, 7vw, 110px);
	background:
		radial-gradient(circle at 1px 1px, rgba(17, 20, 24, .13) 1px, transparent 1.5px) 0 0 / 18px 18px,
		linear-gradient(180deg, #fff 0%, var(--wd-paper) 100%);
}
.wd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.wd-hero__title { margin: 0; font-family: var(--wd-display); font-weight: 900; text-transform: uppercase; color: var(--wd-ink); line-height: .86; }
.wd-hero__kw { display: block; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem); letter-spacing: .005em; }
.wd-hero__line { display: block; font-size: clamp(4.2rem, 2rem + 9vw, 10rem); letter-spacing: -.01em; }
.wd-hero__line em { font-style: normal; color: var(--wd-red); position: relative; display: inline-block; isolation: isolate; }
.wd-hero__line em::after { /* misregistration ghost, like an off-press proof */
	content: "πουλάει."; position: absolute; inset: 0; z-index: -1; color: var(--wd-c); opacity: .5; translate: .035em .025em;
	animation: wd-misreg 6s ease-in-out infinite;
}
@keyframes wd-misreg { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(.02em, .01em); } 55% { transform: translate(-.03em, .015em); } }
.wd-hero__lead { margin: 26px 0 0; max-width: 560px; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.6; }
.wd-hero__lead strong { color: var(--wd-ink); }
.wd-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.wd-hero__facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin: 38px 0 0; padding: 0; list-style: none; border: 1.5px solid var(--wd-ink); border-radius: 12px; background: #fff; width: max-content; max-width: 100%; }
.wd-hero__facts li { display: flex; flex-direction: column; padding: 12px 18px; border-left: 1.5px dashed var(--erp-line-strong); }
.wd-hero__facts li:first-child { border-left: 0; }
.wd-hero__facts b { font-family: var(--wd-display); font-size: 1.6rem; font-weight: 900; line-height: 1; color: var(--wd-ink); }
.wd-hero__facts span { margin-top: 4px; font-family: var(--wd-mono); font-size: .6875rem; color: var(--erp-muted); text-transform: uppercase; letter-spacing: .06em; }

/* The proof sheet */
.wd-sheet {
	position: relative; aspect-ratio: 1 / 1.02; padding: 26px 26px 0; background: #fff;
	border: 1.5px solid var(--wd-ink); box-shadow: 18px 18px 0 -1px var(--wd-y), 18px 18px 0 0 var(--wd-ink);
	transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--wd-ease);
	display: grid; grid-template-rows: auto 1fr auto;
}
.wd-sheet__meta { display: flex; justify-content: space-between; font-family: var(--wd-mono); font-size: .625rem; font-weight: 700; letter-spacing: .1em; color: var(--erp-subtle); }
.wd-sheet__meta { grid-row: 1; }
.wd-sheet .wd-colorbar { grid-row: 3; align-self: end; margin: 0 -26px; height: 16px; border-top: 1.5px solid var(--wd-ink); }
.wd-sheet__reg { position: absolute; width: 26px; height: 26px; color: var(--wd-ink); opacity: .7; }
.wd-sheet__reg--a { top: 50%; left: -40px; }
.wd-sheet__reg--b { top: 50%; right: -40px; }
.wd-proof { position: absolute; margin: 0; width: 64%; transition: transform .6s var(--wd-ease); }
/* proofs are links to the live demos */
.wd-proof .wd-browser { display: block; color: inherit; text-decoration: none; transition: box-shadow .25s; }
.wd-proof .wd-browser__screen { display: block; }
.wd-proof .wd-browser:hover { box-shadow: 0 30px 60px -30px rgba(17, 20, 24, .45), 6px 6px 0 var(--wd-red); }
.wd-proof figcaption { margin-top: 8px; font-family: var(--wd-mono); font-size: .625rem; font-weight: 700; color: var(--erp-muted); letter-spacing: .08em; text-transform: uppercase; }
.wd-proof--1 { top: 9%; left: 5%; z-index: 3; width: 54%; transform: rotate(-3deg); }
.wd-proof--2 { top: 17%; right: 4%; z-index: 2; width: 52%; transform: rotate(4deg); }
.wd-proof--3 { top: 50%; left: 3%; z-index: 4; width: 50%; transform: rotate(2deg); }
.wd-proof--4 { top: 54%; right: 5%; z-index: 5; width: 50%; transform: rotate(-2.5deg); }
.wd-sheet:hover .wd-proof--1 { transform: rotate(-5deg) translate(-10px, -8px); }
.wd-sheet:hover .wd-proof--2 { transform: rotate(6deg) translate(12px, -6px); }
.wd-sheet:hover .wd-proof--3 { transform: rotate(0deg) translate(-8px, 10px); }
.wd-sheet:hover .wd-proof--4 { transform: rotate(-4deg) translate(10px, 10px); }
/* price badge on each proof: yellow = website (350€), red = e-shop (750€) */
.wd-proof .wd-browser { overflow: visible; }
.wd-proof__tag { position: absolute; top: -12px; right: 10px; z-index: 3; padding: 4px 9px; border: 1.5px solid var(--wd-ink); border-radius: 999px; font: 700 .625rem/1.2 var(--wd-mono); letter-spacing: .04em; font-style: normal; white-space: nowrap; box-shadow: 2px 2px 0 var(--wd-ink); }
.wd-proof__tag--y { background: var(--wd-y); color: var(--wd-ink); }
.wd-proof__tag--r { background: var(--wd-red); color: #fff; }
.wd-proof .wd-browser__bar { border-radius: 11px 11px 0 0; }
.wd-proof .wd-browser__screen { border-radius: 0 0 11px 11px; }

/* Load sequence: sheets land like paper on a table. */
@media (prefers-reduced-motion: no-preference) {
	.wd-proof { animation: wd-drop .9s var(--wd-ease) both; }
	.wd-proof--1 { animation-delay: .15s; } .wd-proof--2 { animation-delay: .3s; } .wd-proof--3 { animation-delay: .45s; } .wd-proof--4 { animation-delay: .6s; }
	@keyframes wd-drop { from { opacity: 0; translate: 0 -40px; scale: 1.08; } }
	.wd-hero__copy > * { animation: wd-rise .8s var(--wd-ease) both; }
	.wd-hero__copy > *:nth-child(2) { animation-delay: .08s; } .wd-hero__copy > *:nth-child(3) { animation-delay: .16s; }
	.wd-hero__copy > *:nth-child(4) { animation-delay: .24s; } .wd-hero__copy > *:nth-child(5) { animation-delay: .32s; }
	@keyframes wd-rise { from { opacity: 0; translate: 0 18px; } }
	.wd-sheet .wd-colorbar i { animation: wd-ink .5s var(--wd-ease) both; }
	.wd-sheet .wd-colorbar i:nth-child(n) { animation-delay: calc(.7s + var(--i, 0) * 40ms); }
	@keyframes wd-ink { from { transform: scaleY(0); transform-origin: bottom; } }
	.wd [data-wd-reveal] { opacity: 0; translate: 0 26px; transition: opacity .8s var(--wd-ease), translate .8s var(--wd-ease); }
	.wd [data-wd-reveal].is-in { opacity: 1; translate: 0 0; }
	.wd .wd-mark:not(.is-in) { --wd-sx: 0; }
}

/* ==========================================================================
   Ticker
   ========================================================================== */
.wd-ticker { overflow: hidden; background: var(--wd-ink); color: #fff; border-block: 1.5px solid var(--wd-ink); }
.wd-ticker__track { display: flex; width: max-content; animation: wd-tick 38s linear infinite; }
.wd-ticker span { display: inline-flex; align-items: center; gap: 28px; padding: 16px 0 16px 28px; font-family: var(--wd-display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.wd-ticker span::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--wd-y); }
.wd-ticker span:nth-child(3n + 2)::after { background: var(--wd-c); }
.wd-ticker span:nth-child(3n)::after { background: var(--wd-m); }
@keyframes wd-tick { to { transform: translateX(-50%); } }

/* ==========================================================================
   WORK
   ========================================================================== */
.wd-work { padding: clamp(64px, 9vw, 140px) 0; background: #fff; }
.wd-case { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(40px, 5vw, 70px) 0; border-top: 1.5px dashed var(--erp-line-strong); }
.wd-case:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.wd-case:nth-of-type(even) .wd-case__stage { order: 2; }
.wd-case { --tone: var(--wd-red); }
.wd-case--cyan { --tone: var(--wd-c); }
.wd-case--yellow { --tone: var(--wd-y); }
.wd-case__stage { position: relative; padding: clamp(18px, 3vw, 36px); background: color-mix(in srgb, var(--tone) 14%, #fff); border-radius: 4px; }
.wd-case__stage::before { /* halftone corner */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tone) 70%, #000) 1.2px, transparent 1.8px) 0 0 / 12px 12px;
	-webkit-mask: linear-gradient(135deg, #000 0%, transparent 45%); mask: linear-gradient(135deg, #000 0%, transparent 45%); opacity: .35;
}
.wd-case__views { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24%; gap: 0; align-items: end; }
.wd-case__views .wd-browser { grid-column: 1 / 2; grid-row: 1; }
.wd-case__views .wd-phone { grid-column: 2; grid-row: 1; margin-left: -34%; margin-bottom: -18px; z-index: 2; transition: transform .5s var(--wd-ease); }
.wd-case__views[data-view="mobile"] { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.wd-case__views[data-view="mobile"] .wd-browser { display: none; }
.wd-case__views[data-view="mobile"] .wd-phone { grid-column: 1; width: min(46%, 290px); margin: 0; }
.wd-case__toggle { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; padding: 3px; background: #fff; border: 1.5px solid var(--wd-ink); border-radius: 999px; }
.wd-case__toggle button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; font: 700 .75rem/1 var(--erp-font); color: var(--wd-ink); cursor: pointer; }
.wd-case__toggle button svg { width: 15px; height: 15px; }
.wd-case__toggle button.is-on { background: var(--wd-ink); color: #fff; }
.wd-case__no { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--wd-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); }
.wd-case__no > span { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; background: var(--tone); color: var(--wd-ink); border: 1.5px solid var(--wd-ink); border-radius: 6px; }
.wd-case--red .wd-case__no > span { color: #fff; }
.wd-status { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--erp-soft); color: var(--erp-muted); }
.wd-status.is-live { background: var(--erp-green-50); color: var(--erp-green); }
.wd-status.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: wd-pulse 2s infinite; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
.wd-case__name { margin: 0; font-family: var(--wd-display); font-weight: 900; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: .9; text-transform: lowercase; color: var(--wd-ink); }
.wd-case__title { margin: 12px 0 0; font-size: 1.2rem; font-weight: 800; color: var(--wd-ink); }
.wd-case__text { margin: 12px 0 0; line-height: 1.65; color: var(--erp-text); }
.wd-case__feat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.wd-case__feat li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; font-weight: 600; color: var(--wd-ink); }
.wd-case__feat svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 2px; border-radius: 50%; background: var(--tone); color: var(--wd-ink); stroke-width: 3; }
.wd-case--red .wd-case__feat svg { color: #fff; }
.wd-case__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding-bottom: 3px; font-weight: 800; color: var(--wd-ink); border-bottom: 2px solid var(--tone); }
.wd-case__link svg { width: 18px; height: 18px; transition: transform .2s; }
.wd-case__link:hover svg { transform: translate(3px, -3px); }
.wd-case__link.is-soon { color: var(--erp-muted); border-bottom-style: dashed; }

/* ==========================================================================
   BUILDER
   ========================================================================== */
.wd-builder { padding: clamp(64px, 9vw, 140px) 0; background: var(--wd-ink); color: #d9dbe0; }
.wd-builder::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 18px 18px; }
.wd-head--light .wd-h2 { color: #fff; }
.wd-head--light .wd-mark { color: #fff; }
.wd-head--light .wd-mark--y { color: var(--wd-ink); padding: 0 .08em; }
.wd-head--light .wd-mark--y::after { left: 0; right: 0; bottom: -.04em; height: .98em; opacity: 1; }
.wd-head--light .wd-head__lead, .wd-head--light .wd-label { color: #a7abb3; }
.wd-build { position: relative; display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.wd-build__panel { display: grid; gap: 22px; padding: 26px; background: #1b1e23; border: 1.5px solid #2c3037; border-radius: 16px; }
.wd-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wd-field > span, .wd-field > legend { padding: 0; font-family: var(--wd-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a7abb3; }
.wd-field input[type="text"], .wd-field input[type="email"], .wd-field input[type="tel"], .wd-field textarea {
	width: 100%; padding: 13px 14px; border: 1.5px solid var(--erp-line-strong); border-radius: 10px; background: #fff; font: 600 1rem/1.4 var(--erp-font); color: var(--wd-ink);
}
.wd-field textarea { resize: vertical; min-height: 120px; }
.wd-field input:focus, .wd-field textarea:focus { outline: none; border-color: var(--wd-ink); box-shadow: 3px 3px 0 var(--wd-c); }
.wd-field .is-invalid { border-color: var(--wd-red); box-shadow: 3px 3px 0 var(--wd-red); }
.wd-build__panel input[type="text"] { background: #0f1114; border-color: #343941; color: #fff; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-chips label { position: relative; }
.wd-chips input, .wd-swatches input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wd-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1.5px solid #3a3f47; border-radius: 999px; font-size: .875rem; font-weight: 700; color: #d9dbe0; transition: background .15s, border-color .15s, color .15s; }
.wd-chips span svg { width: 16px; height: 16px; }
.wd-chips input:checked + span { background: var(--wd-y); border-color: var(--wd-y); color: var(--wd-ink); }
.wd-chips input:focus-visible + span { outline: 3px solid var(--wd-c); outline-offset: 2px; }
.wd-chips--sm span { padding: 7px 12px; font-size: .8125rem; }
.wd-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.wd-swatches label { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); cursor: pointer; transition: transform .15s; }
.wd-swatches label:hover { transform: scale(1.08); }
.wd-swatches label:has(input:checked) { box-shadow: 0 0 0 3px var(--wd-ink), 0 0 0 5px #fff; }
.wd-swatches label:has(input:focus-visible) { outline: 3px solid var(--wd-c); outline-offset: 4px; }

.wd-build__preview { --b: #e30a17; --bf: var(--erp-font); --br: 12px; min-width: 0; }
.wd-build__preview[data-style="classic"] { --bf: Georgia, "Times New Roman", serif; --br: 2px; }
.wd-build__preview[data-style="bold"] { --bf: var(--wd-display); --br: 0px; }
.wd-build__preview .wd-browser { border-color: #000; box-shadow: 14px 14px 0 var(--b); transition: box-shadow .4s var(--wd-ease); }
.wd-mini { display: grid; gap: 18px; padding: 18px 20px 24px; background: #fff; color: var(--wd-ink); font-family: var(--erp-font); min-height: 420px; }
.wd-mini__nav { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--erp-line); }
.wd-mini__logo { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-family: var(--bf); font-weight: 800; font-size: 1.05rem; }
.wd-build__preview[data-style="bold"] .wd-mini__logo { font-size: 1.35rem; text-transform: uppercase; }
.wd-mini__logo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-mini__logo b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--br); background: var(--b); color: #fff; font-size: 1rem; transition: background .3s, border-radius .3s; }
.wd-mini__links { display: flex; gap: 14px; margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--erp-muted); }
.wd-mini__links i { font-style: normal; }
.wd-mini__cart { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--erp-soft); }
.wd-mini__cart svg { width: 16px; height: 16px; }
.wd-build__preview:not([data-type="shop"]) .wd-mini__cart { display: none; }
.wd-mini__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; padding: 26px; border-radius: var(--br); background: color-mix(in srgb, var(--b) 10%, #fff); transition: background .3s, border-radius .3s; }
.wd-mini__kicker { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--b); filter: brightness(.85); }
.wd-mini__title { margin: 8px 0 16px; font-family: var(--bf); font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); font-weight: 800; line-height: 1.1; }
.wd-build__preview[data-style="bold"] .wd-mini__title { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); text-transform: uppercase; line-height: .92; }
.wd-build__preview[data-style="classic"] .wd-mini__title { font-weight: 400; font-style: italic; }
.wd-mini__btn { display: inline-flex; padding: 10px 18px; border-radius: var(--br); background: var(--b); color: #fff; font-size: .85rem; font-weight: 800; transition: background .3s; }
.wd-build__preview[style*="#ffd400"] .wd-mini__btn, .wd-build__preview[style*="#ffd400"] .wd-mini__logo b { color: var(--wd-ink); }
.wd-mini__art { position: relative; height: 140px; }
.wd-mini__art i { position: absolute; border-radius: var(--br); background: var(--b); transition: all .5s var(--wd-ease); }
.wd-mini__art i:nth-child(1) { inset: 8% 30% 20% 8%; opacity: .9; }
.wd-mini__art i:nth-child(2) { inset: 30% 6% 6% 44%; background: var(--wd-ink); opacity: .9; }
.wd-mini__art i:nth-child(3) { width: 34px; height: 34px; right: 10%; top: 4%; border-radius: 50%; background: color-mix(in srgb, var(--b) 45%, #fff); }
.wd-build__preview[data-type="food"] .wd-mini__art i:nth-child(1), .wd-build__preview[data-type="beauty"] .wd-mini__art i:nth-child(1) { border-radius: 50%; inset: 4% 34% 14% 6%; }
.wd-build__preview[data-type="pro"] .wd-mini__art i:nth-child(2) { inset: 18% 4% 14% 38%; }
.wd-mini__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wd-mini__cards div { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--erp-line); border-radius: var(--br); transition: border-radius .3s; }
.wd-mini__cards i { aspect-ratio: 4 / 3; border-radius: calc(var(--br) * .6); background: color-mix(in srgb, var(--b) 18%, var(--erp-soft)); transition: background .3s; }
.wd-mini__cards b { font-family: var(--bf); font-size: .85rem; }
.wd-mini__cards span { font-size: .78rem; font-weight: 800; color: var(--b); filter: brightness(.85); }
.wd-build__note { display: flex; gap: 8px; align-items: center; margin: 26px 0 0; font-size: .8125rem; color: #8b9099; }
.wd-build__note svg { width: 16px; height: 16px; flex: none; }
.wd-mini.is-flash { animation: wd-flash .45s var(--wd-ease); }
@keyframes wd-flash { 40% { filter: saturate(1.4) brightness(1.04); transform: scale(.995); } }

/* ==========================================================================
   PLANS
   ========================================================================== */
.wd-plans { padding: clamp(64px, 9vw, 140px) 0; background: var(--wd-paper); }
.wd-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.wd-plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; background: #fff; border: 1.5px solid var(--wd-ink); border-radius: 16px; transition: transform .25s var(--wd-ease), box-shadow .25s; }
.wd-plan:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--wd-ink); }
.wd-plan.is-best { background: var(--wd-ink); color: #c9ccd2; box-shadow: 8px 8px 0 var(--wd-red); }
.wd-plan.is-best:hover { box-shadow: 12px 12px 0 var(--wd-red); }
.wd-plan__ribbon { position: absolute; top: -14px; left: 24px; padding: 5px 12px; background: var(--wd-y); color: var(--wd-ink); border: 1.5px solid var(--wd-ink); border-radius: 999px; font-family: var(--wd-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; }
.wd-plan__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--wd-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--erp-muted); }
.wd-plan__tag svg { width: 18px; height: 18px; color: var(--wd-red); }
.wd-plan__name { margin: 14px 0 0; font-family: var(--wd-display); font-weight: 900; font-size: 2.1rem; line-height: .95; text-transform: uppercase; color: var(--wd-ink); }
.wd-plan.is-best .wd-plan__name, .wd-plan.is-best .wd-plan__price b, .wd-plan.is-best .wd-plan__feat li { color: #fff; }
.wd-plan__desc { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; }
.wd-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 22px 0 0; padding: 18px 0; border-block: 1.5px dashed var(--erp-line-strong); }
.wd-plan.is-best .wd-plan__price { border-color: #3a3f47; }
.wd-plan__price small { font-weight: 700; font-size: .9rem; }
.wd-plan__price b { font-family: var(--wd-display); font-weight: 900; font-size: 4.2rem; line-height: .85; color: var(--wd-ink); }
.wd-plan__price b.is-text { font-size: 2rem; line-height: 1; }
.wd-plan__price span { flex-basis: 100%; font-family: var(--wd-mono); font-size: .75rem; color: var(--erp-muted); }
.wd-plan.is-best .wd-plan__price span { color: #a7abb3; }
.wd-plan__feat { display: grid; gap: 10px; margin: 20px 0 26px; padding: 0; list-style: none; flex: 1; }
.wd-plan__feat li { display: flex; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--wd-ink); }
.wd-plan__feat svg { flex: none; width: 18px; height: 18px; color: var(--wd-red); stroke-width: 3; }
.wd-plan.is-best .wd-btn { box-shadow: 4px 4px 0 #fff; }

.wd-coupon { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; margin-top: 54px; padding: 26px 30px; background: #fff; border: 1.5px dashed var(--wd-ink); border-radius: 6px; }
.wd-coupon__stub { display: grid; justify-items: center; padding: 14px 22px; background: var(--wd-red); color: #fff; border-radius: 6px; transform: rotate(-4deg); box-shadow: 5px 5px 0 var(--wd-ink); }
.wd-coupon__stub span { font-family: var(--wd-mono); font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wd-coupon__stub b { font-family: var(--wd-display); font-size: 3.4rem; font-weight: 900; line-height: .9; }
.wd-coupon__body h3 { margin: 0; font-family: var(--wd-display); font-weight: 900; font-size: 1.9rem; text-transform: uppercase; line-height: .95; color: var(--wd-ink); }
.wd-coupon__body p { margin: 8px 0 0; line-height: 1.55; }

/* ==========================================================================
   SPECS
   ========================================================================== */
.wd-specs { padding: clamp(64px, 9vw, 140px) 0; background: #fff; }
.wd-specs__grid, .wd-guide__grid, .wd-faq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wd-specs__grid .wd-head, .wd-faq__grid .wd-head, .wd-guide__grid .wd-head { position: sticky; top: calc(var(--erp-header-h, 84px) + 24px); }
.wd-spec { margin: 0; border-top: 2px solid var(--wd-ink); }
.wd-spec__row { display: grid; grid-template-columns: minmax(170px, .8fr) 1.2fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--erp-line-strong); transition: background .2s, padding .2s; }
.wd-spec__row:hover { background: var(--wd-paper); padding-inline: 14px; }
.wd-spec dt { display: flex; align-items: center; gap: 10px; font-family: var(--wd-display); font-weight: 900; font-size: 1.45rem; text-transform: uppercase; color: var(--wd-ink); }
.wd-spec dt svg { width: 22px; height: 22px; flex: none; color: var(--wd-red); }
.wd-spec dd { margin: 0; line-height: 1.6; align-self: center; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.wd-process { padding: clamp(64px, 9vw, 140px) 0; background: var(--wd-ink); color: #c9ccd2; }
.wd-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wd-steps::before { content: ""; position: absolute; top: 31px; left: 4%; right: 4%; height: 2px; background: repeating-linear-gradient(90deg, #4a4f57 0 8px, transparent 8px 16px); }
.wd-steps li { position: relative; display: flex; flex-direction: column; padding: 0 4px; }
.wd-steps__n { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 50%; background: var(--wd-y); color: var(--wd-ink); font-family: var(--wd-display); font-weight: 900; font-size: 2.2rem; box-shadow: 0 0 0 8px var(--wd-ink); }
.wd-steps li:nth-child(2) .wd-steps__n { background: var(--wd-c); }
.wd-steps li:nth-child(3) .wd-steps__n { background: var(--wd-m); color: #fff; }
.wd-steps li:nth-child(4) .wd-steps__n { background: var(--wd-red); color: #fff; }
.wd-steps h3 { margin: 0; font-family: var(--wd-display); font-weight: 900; font-size: 1.75rem; line-height: .95; text-transform: uppercase; color: #fff; }
.wd-steps p { margin: 12px 0 16px; line-height: 1.6; font-size: .95rem; }
.wd-steps small { margin-top: auto; font-family: var(--wd-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wd-y); }

/* ==========================================================================
   GUIDE (SEO copy)
   ========================================================================== */
.wd-guide { padding: clamp(64px, 9vw, 140px) 0; background: var(--wd-paper); }
.wd-guide .wd-h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); }
.wd-prose { max-width: 720px; }
.wd-prose h3 { margin: 38px 0 10px; font-size: 1.3rem; font-weight: 800; color: var(--wd-ink); }
.wd-prose h3:first-child { margin-top: 0; }
.wd-prose h3::before { content: "¶ "; color: var(--wd-red); font-family: var(--wd-mono); }
.wd-prose p { margin: 0; line-height: 1.75; font-size: 1.02rem; }
.wd-prose strong { color: var(--wd-ink); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.wd-faq { padding: clamp(64px, 9vw, 140px) 0; background: #fff; }
.wd-faq__list { border-top: 2px solid var(--wd-ink); }
.wd-qa { border-bottom: 1px solid var(--erp-line-strong); }
.wd-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 1.1rem; font-weight: 800; color: var(--wd-ink); }
.wd-qa summary::-webkit-details-marker { display: none; }
.wd-qa summary:hover { color: var(--wd-red); }
.wd-qa__icon { position: relative; flex: none; width: 34px; height: 34px; border: 1.5px solid var(--wd-ink); border-radius: 50%; transition: background .2s, transform .3s var(--wd-ease); }
.wd-qa__icon::before, .wd-qa__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--wd-ink); transform: translate(-50%, -50%); }
.wd-qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--wd-ease); }
.wd-qa[open] .wd-qa__icon { background: var(--wd-y); transform: rotate(180deg); }
.wd-qa[open] .wd-qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.wd-qa p { margin: 0 0 24px; max-width: 640px; line-height: 1.7; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.wd-contact { padding: 0 0 clamp(64px, 9vw, 140px); background: var(--wd-y); color: var(--wd-ink); }
.wd-contact > .wd-colorbar { height: 16px; margin-bottom: clamp(56px, 8vw, 110px); }
.wd-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wd-contact .wd-label, .wd-contact .wd-head__lead { color: var(--wd-ink); }
.wd-contact .wd-mark--y::after { background: #fff; }
.wd-contact__ways { display: grid; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.wd-contact__ways a, .wd-contact__addr { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1.5px solid var(--wd-ink); border-radius: 12px; color: var(--wd-ink); font-weight: 800; transition: transform .15s, box-shadow .15s; }
.wd-contact__ways a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--wd-ink); }
.wd-contact__ways svg { width: 22px; height: 22px; flex: none; color: var(--wd-red); }
.wd-contact__ways small { display: block; font-family: var(--wd-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--erp-muted); font-weight: 700; }
.wd-form { position: relative; display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); background: #fff; border: 1.5px solid var(--wd-ink); border-radius: 18px; box-shadow: 12px 12px 0 var(--wd-ink); }
.wd-form .wd-field > span, .wd-form .wd-field > legend { color: var(--erp-muted); }
.wd-form .wd-chips span { border-color: var(--erp-line-strong); color: var(--wd-ink); }
.wd-form .wd-chips input:checked + span { background: var(--wd-ink); border-color: var(--wd-ink); color: #fff; }
.wd-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wd-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wd-form__err { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--erp-primary-50); color: var(--erp-primary-700); font-weight: 700; font-size: .9rem; }
.wd-form__fine { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; color: var(--erp-muted); }
.wd-form__fine svg { width: 15px; height: 15px; }
.wd-form [data-wd-submit].is-loading { opacity: .7; pointer-events: none; }
.wd-form.is-done > :not([data-wd-done]) { visibility: hidden; }
.wd-form__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 30px; text-align: center; }
.wd-form__done[hidden], .wd-form__err[hidden] { display: none; }
.wd-form__done svg { width: 64px; height: 64px; color: var(--erp-green); }
.wd-form__done h3 { margin: 0; font-family: var(--wd-display); font-weight: 900; font-size: 2.4rem; text-transform: uppercase; }
.wd-form__done p { margin: 0; max-width: 340px; line-height: 1.6; }
.wd-form__done a { color: var(--wd-red); font-weight: 800; }

/* ==========================================================================
   TEMPLATES (ready-made designs → /site-demos/<key>/): sector groups, two per row
   ========================================================================== */
.wd-tpl { padding: clamp(64px, 9vw, 130px) 0; background: #fff; }
.wd-tpl__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.wd-tpl__filters button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1.5px solid var(--wd-ink); border-radius: 999px; background: #fff; font: 700 .875rem/1 var(--erp-font); color: var(--wd-ink); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.wd-tpl__filters button small { font-family: var(--wd-mono); font-size: .6875rem; color: var(--erp-muted); }
.wd-tpl__filters button:hover { transform: translateY(-1px); }
.wd-tpl__filters button.is-on { background: var(--wd-ink); color: #fff; }
.wd-tpl__filters button.is-on small { color: var(--wd-y); }
.wd-tpl__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px clamp(28px, 4vw, 56px); }
.wd-tgroup[hidden] { display: none; }
.wd-tpl__groups.is-one .wd-tgroup { grid-column: 1 / -1; }
.wd-tgroup__h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--wd-ink); }
.wd-tgroup__h span { font-family: var(--wd-display); font-weight: 900; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); line-height: .9; text-transform: uppercase; color: var(--wd-ink); }
.wd-tgroup__h small { margin-left: auto; font-family: var(--wd-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); text-align: right; }
.wd-tgroup__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wd-tpl__groups.is-one .wd-tgroup__row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.wd-tcard { display: flex; flex-direction: column; min-width: 0; }
.wd-tcard__shot { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 10px; transition: transform .3s var(--wd-ease), box-shadow .3s; }
.wd-tcard__shot:hover { transform: translateY(-3px); box-shadow: 7px 7px 0 var(--wd-ink); }
.wd-tcard__shot .wd-browser__bar { height: 24px; padding: 0 9px; }
.wd-tcard__shot .wd-browser__bar i { width: 7px; height: 7px; }
.wd-tcard__shot .wd-browser__bar span { font-size: .625rem; padding: 2px 8px; }
.wd-tcard__shot .wd-browser__screen { display: block; aspect-ratio: 16 / 11; }
.wd-tcard__live { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--wd-ink); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.wd-tcard__live svg { width: 15px; height: 15px; }
.wd-tcard__shot:hover .wd-tcard__live, .wd-tcard__shot:focus-visible .wd-tcard__live { opacity: 1; transform: translate(-50%, 0); }
.wd-tcard__name { margin: 14px 0 0; font-family: var(--wd-display); font-weight: 900; font-size: 1.55rem; line-height: .95; text-transform: uppercase; color: var(--wd-ink); }
.wd-tcard__for { margin: 4px 0 0; font-family: var(--wd-mono); font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); }
.wd-tcard__text { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wd-tcard__ctas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.wd-tcard__demo { display: inline-flex; align-items: center; gap: 5px; font-size: .875rem; font-weight: 800; color: var(--wd-ink); border-bottom: 2px solid var(--wd-y); padding-bottom: 1px; }
.wd-tcard__demo svg { width: 15px; height: 15px; transition: transform .2s; }
.wd-tcard__demo:hover svg { transform: translate(2px, -2px); }
.wd-tcard__ctas .cg-btn { padding: 9px 15px; font-size: .875rem; min-height: 0; }
.wd-tpl__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 46px 0 0; padding: 16px 20px; border: 1.5px dashed var(--wd-ink); border-radius: 12px; line-height: 1.55; }
.wd-tpl__more svg { width: 20px; height: 20px; color: var(--wd-red); flex: none; }
.wd-tpl__more a { color: var(--wd-red); font-weight: 800; }

/* Price tags next to a section title (click → the plan, highlighted) */
.wd-head--price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; max-width: none; }
.wd-head--price > div { max-width: 860px; }
.wd-price { position: relative; display: grid; justify-items: start; gap: 2px; min-width: 230px; padding: 18px 22px 16px; background: var(--wd-y); color: var(--wd-ink); border: 1.5px solid var(--wd-ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--wd-ink); transform: rotate(2deg); transition: transform .25s var(--wd-ease), box-shadow .25s; text-decoration: none; }
.wd-price::before { content: ""; position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1.5px solid var(--wd-ink); }
.wd-price:hover, .wd-price:focus-visible { transform: rotate(0) translate(-2px, -2px); box-shadow: 9px 9px 0 var(--wd-ink); }
.wd-price small { font-family: var(--wd-mono); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wd-price__from { margin-top: 6px; font-weight: 700; font-size: .875rem; }
.wd-price b { font-family: var(--wd-display); font-weight: 900; font-size: 4rem; line-height: .82; }
.wd-price__month { margin-top: 6px; font-size: .8rem; font-weight: 600; }
.wd-price em { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed var(--wd-ink); width: 100%; font-style: normal; font-weight: 800; font-size: .8125rem; }
.wd-price em svg { width: 15px; height: 15px; transition: transform .2s; }
.wd-price:hover em svg { transform: translateY(3px); }
.wd-price--dark { background: var(--wd-ink); color: #fff; box-shadow: 6px 6px 0 var(--wd-red); transform: rotate(-2deg); }
.wd-price--dark::before { background: var(--wd-red); }
.wd-price--dark:hover, .wd-price--dark:focus-visible { box-shadow: 9px 9px 0 var(--wd-red); }
.wd-price--dark em { border-color: #4a4f57; }
.wd-plan.is-flash { animation: wd-planflash 1.6s var(--wd-ease); }
@keyframes wd-planflash { 0%, 100% { outline: 0 solid var(--wd-y); } 15%, 70% { outline: 6px solid var(--wd-y); outline-offset: 6px; } }

/* Hero facts are links */
.wd-hero__facts li { padding: 0; }
.wd-hero__facts a { display: flex; flex-direction: column; padding: 12px 18px; color: inherit; text-decoration: none; transition: background .15s; }
.wd-hero__facts a:hover { background: var(--wd-y); }
.wd-hero__facts li:first-child a { border-radius: 10px 0 0 10px; }
.wd-hero__facts li:last-child a { border-radius: 0 10px 10px 0; }

/* Shops: one at a time */
.wd-shoptabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.wd-shoptab { display: grid; gap: 4px; justify-items: start; padding: 14px 18px; border: 1.5px solid var(--wd-ink); border-radius: 12px; background: #fff; color: var(--wd-ink); text-align: left; cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s, background .15s; }
.wd-shoptab b { font-family: var(--wd-display); font-weight: 900; font-size: 1.6rem; line-height: .95; text-transform: lowercase; }
.wd-shoptab small { font-family: var(--wd-mono); font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); }
.wd-shoptab:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--wd-ink); }
.wd-shoptab.is-on { background: var(--wd-red); color: #fff; box-shadow: 5px 5px 0 var(--wd-ink); }
.wd-shoptab--cyan.is-on { background: var(--wd-c); color: var(--wd-ink); }
.wd-shoptab--yellow.is-on { background: var(--wd-y); color: var(--wd-ink); }
.wd-shoptab.is-on small { color: inherit; opacity: .8; }
.wd-work .wd-case { border-top: 0; }
.wd-work .wd-case[hidden] { display: none; }
.wd-work .wd-case:nth-of-type(even) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.wd-work .wd-case:nth-of-type(even) .wd-case__stage { order: 0; }
@media (prefers-reduced-motion: no-preference) { .wd-work .wd-case:not([hidden]) { animation: wd-rise .45s var(--wd-ease) both; } }


/* ==========================================================================
   BOOKINGS (front-end demo only)
   ========================================================================== */
.wd-book { padding: clamp(64px, 9vw, 140px) 0; background: var(--wd-ink); color: #c9ccd2; }
.wd-book::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 18px 18px; }
.wd-book__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.wd-book__feat { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 0; padding: 0; list-style: none; }
.wd-book__feat li { display: flex; gap: 12px; align-items: flex-start; }
.wd-book__feat svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: #1f232a; color: var(--wd-y); }
.wd-book__feat b { display: block; margin-bottom: 4px; color: #fff; font-size: 1rem; }
.wd-book__feat span { font-size: .9rem; line-height: 1.55; }
.wd-book__try { margin: 32px 0 0; }
.wd-book__try a { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 3px; color: #fff; font-weight: 800; border-bottom: 2px solid var(--wd-y); }
.wd-book__try svg { width: 18px; height: 18px; }
.wd-book__try a:hover svg:last-child { transform: translate(3px, -3px); transition: transform .2s; }

.wd-bw { position: relative; background: #fff; color: var(--wd-ink); border: 1.5px solid #000; border-radius: 18px; box-shadow: 14px 14px 0 var(--wd-y); overflow: hidden; }
.wd-bw__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1.5px solid var(--wd-ink); background: repeating-linear-gradient(-45deg, var(--wd-y) 0 10px, var(--wd-ink) 10px 20px) top / 100% 6px no-repeat, #fff; padding-top: 22px; }
.wd-bw__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--wd-ink); color: var(--wd-y); font-family: var(--wd-display); font-weight: 900; font-size: 1.3rem; }
.wd-bw__head b { display: block; font-family: var(--wd-display); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; line-height: 1; }
.wd-bw__head small { color: var(--erp-muted); font-size: .8rem; }
.wd-bw__head em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--wd-paper); font: 700 .625rem/1 var(--wd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--erp-muted); font-style: normal; }
.wd-bw__body { display: grid; gap: 12px; padding: 20px; }
.wd-bw__step { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-family: var(--wd-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--erp-muted); }
.wd-bw__step:first-child { margin-top: 0; }
.wd-bw__step span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wd-ink); color: #fff; letter-spacing: 0; }
.wd-bw__services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wd-bw button { font: inherit; cursor: pointer; }
.wd-bw__services button, .wd-bw__days button, .wd-bw__times button { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border: 1.5px solid var(--erp-line-strong); border-radius: 10px; background: #fff; color: var(--wd-ink); text-align: center; transition: border-color .15s, background .15s, transform .15s; }
.wd-bw__services b { font-size: .8125rem; line-height: 1.2; }
.wd-bw__services small, .wd-bw__days small { font-size: .6875rem; color: var(--erp-muted); }
.wd-bw__days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.wd-bw__days b { font-family: var(--wd-display); font-size: 1.35rem; font-weight: 900; line-height: 1; }
.wd-bw__times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wd-bw__times button { padding: 9px 4px; font-weight: 700; font-size: .875rem; }
.wd-bw button:not(:disabled):hover { border-color: var(--wd-ink); transform: translateY(-1px); }
.wd-bw button.is-on { border-color: var(--wd-ink); background: var(--wd-y); }
.wd-bw__days button.is-on small { color: var(--wd-ink); }
.wd-bw__times button:disabled { color: var(--erp-subtle, #a0a4ab); text-decoration: line-through; background: var(--wd-paper); cursor: not-allowed; }
.wd-bw__go { margin-top: 6px; }
.wd-bw__done { display: grid; justify-items: center; gap: 10px; padding: 44px 26px; text-align: center; }
.wd-bw__done[hidden] { display: none; }
.wd-bw__done > svg { width: 60px; height: 60px; color: var(--erp-green, #16a34a); }
.wd-bw__done h3 { margin: 0; font-family: var(--wd-display); font-weight: 900; font-size: 2.2rem; text-transform: uppercase; line-height: 1; }
.wd-bw__done p { margin: 0; font-weight: 700; }
.wd-bw__done small { max-width: 320px; color: var(--erp-muted); line-height: 1.5; }
.wd-bw__again { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; border: 1.5px solid var(--wd-ink); border-radius: 999px; background: #fff; font-weight: 700; }
.wd-bw__again svg { width: 15px; height: 15px; }

/* ==========================================================================
   GIFTS (in the plans section)
   ========================================================================== */
.wd-gifts { display: grid; gap: 26px; justify-items: start; margin-top: 64px; }
.wd-gifts__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.wd-gifts__stamp { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--wd-red); color: #fff; border-radius: 6px; transform: rotate(-4deg); box-shadow: 5px 5px 0 var(--wd-ink); font-family: var(--wd-display); font-weight: 900; font-size: 1.5rem; letter-spacing: .04em; }
.wd-gifts__stamp svg { width: 22px; height: 22px; }
.wd-gifts__head h3 { margin: 0; font-family: var(--wd-display); font-weight: 900; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); text-transform: uppercase; line-height: .95; color: var(--wd-ink); }
.wd-gifts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; }
.wd-gift { position: relative; padding: 26px 24px; background: #fff; border: 1.5px dashed var(--wd-ink); border-radius: 6px; }
.wd-gift__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--wd-y); border: 1.5px solid var(--wd-ink); color: var(--wd-ink); }
.wd-gift__icon svg { width: 26px; height: 26px; }
.wd-gift:nth-child(2) .wd-gift__icon { background: var(--wd-c); }
.wd-gift:nth-child(3) .wd-gift__icon { background: var(--wd-red); color: #fff; }
.wd-gift h4 { margin: 18px 0 0; font-family: var(--wd-display); font-weight: 900; font-size: 1.6rem; line-height: .95; text-transform: uppercase; color: var(--wd-ink); }
.wd-gift p { margin: 10px 0 0; font-size: .95rem; line-height: 1.6; }

@media (max-width: 1100px) {
	.wd-tpl__groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
	.wd-head--price { grid-template-columns: minmax(0, 1fr); }
	.wd-price { justify-self: start; }
	.wd-shoptabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wd-book__grid { grid-template-columns: minmax(0, 1fr); }
	.wd-gifts__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 640px) {
	/* designs: each sector is a sideways swipe row (cards peek in) */
	.wd-tgroup__row, .wd-tpl__groups.is-one .wd-tgroup__row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--erp-gutter, 16px) * -1); padding: 4px var(--erp-gutter, 16px) 12px; scrollbar-width: none; }
	.wd-tgroup__row::-webkit-scrollbar { display: none; }
	.wd-tcard { flex: 0 0 82%; scroll-snap-align: start; }
	.wd-tcard__text { display: none; }
	.wd-tcard__shot .wd-browser__screen { aspect-ratio: 16 / 10; }
	.wd-tcard__name { margin-top: 10px; font-size: 1.35rem; }
	.wd-tpl__more { margin-top: 30px; font-size: .9rem; }
	.wd-tgroup__row:has(.wd-tcard:only-child) .wd-tcard { flex-basis: 100%; }
	.wd-tgroup__h small { font-size: .5625rem; }
	.wd-tpl__groups { gap: 34px; }
	.wd-price { min-width: 0; width: 100%; transform: none; }
	.wd-price b { font-size: 3.2rem; }
	.wd-shoptabs { grid-template-columns: minmax(0, 1fr); }
	.wd-shoptab { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; padding: 10px 14px; }
	.wd-shoptab b { font-size: 1.3rem; }
	.wd-hero__facts li:nth-child(odd) a, .wd-hero__facts li:nth-child(even) a { border-radius: 0; }
	.wd-tpl__filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--erp-gutter, 16px) * -1); padding: 0 var(--erp-gutter, 16px) 6px; scrollbar-width: none; }
	.wd-tpl__filters button { flex: none; }
	.wd-book__feat { grid-template-columns: minmax(0, 1fr); }
	.wd-bw { box-shadow: 8px 8px 0 var(--wd-y); }
	.wd-bw__body { padding: 16px; }
	.wd-bw__services { grid-template-columns: minmax(0, 1fr); }
	.wd-bw__services button { grid-template-columns: 1fr auto; justify-items: start; align-items: center; padding: 10px 12px; }
	.wd-bw__days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wd-bw__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.wd-steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }
	.wd-steps::before { display: none; }
}
@media (max-width: 960px) {
	.wd-hero__grid, .wd-case, .wd-case:nth-of-type(even), .wd-build, .wd-specs__grid, .wd-guide__grid, .wd-faq__grid, .wd-contact__grid { grid-template-columns: minmax(0, 1fr); }
	.wd-case:nth-of-type(even) .wd-case__stage { order: 0; }
	.wd-specs__grid .wd-head, .wd-faq__grid .wd-head, .wd-guide__grid .wd-head { position: static; }
	.wd-sheet { max-width: 560px; width: 100%; margin: 10px auto 0; }
	.wd-plans__grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; row-gap: 30px; }
	.wd-coupon { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 640px) {
	.wd-hero__facts { grid-template-columns: 1fr 1fr; width: 100%; }
	.wd-hero__facts li:nth-child(3) { border-left: 0; }
	.wd-hero__facts li:nth-child(n + 3) { border-top: 1.5px dashed var(--erp-line-strong); }
	.wd-hero__ctas .cg-btn { width: 100%; }
	.wd-sheet { padding: 16px 16px 0; box-shadow: 10px 10px 0 -1px var(--wd-y), 10px 10px 0 0 var(--wd-ink); }
	.wd-sheet .wd-colorbar { margin: 0 -16px; }
	.wd-sheet__reg { display: none; }
	.wd-case__feat { grid-template-columns: minmax(0, 1fr); }
	.wd-case__views[data-view="desktop"] { grid-template-columns: minmax(0, 1fr); }
	.wd-case__views[data-view="desktop"] .wd-phone { display: none; }
	.wd-case__stage { padding-top: 54px; }
	.wd-proof figcaption { display: none; }
	.wd-case__toggle button { padding: 6px 10px; }
	.wd-steps { grid-template-columns: minmax(0, 1fr); }
	.wd-spec__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.wd-form__row { grid-template-columns: minmax(0, 1fr); }
	.wd-mini { padding: 14px; min-height: 0; }
	.wd-mini__links { display: none; }
	.wd-mini__hero { grid-template-columns: minmax(0, 1fr); padding: 18px; }
	.wd-mini__art { display: none; }
	.wd-mini__cards { grid-template-columns: repeat(2, 1fr); }
	.wd-mini__cards div:nth-child(3) { display: none; }
	.wd-build__preview .wd-browser { box-shadow: 8px 8px 0 var(--b); }
	.wd-ticker span { font-size: 1.25rem; }
	.wd-mark { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.wd *, .wd *::before, .wd *::after { animation: none !important; transition-duration: .01ms !important; }
	.wd-autoscroll img { object-position: 50% 0; }
}