/* =========================================================================
   AW PageKit — стили (пресеты)
   Каждый стиль = набор токенов + несколько «характерных» правил.
   ========================================================================= */

/* ============================== SaaS ============================== */
.aw-s-saas { --aw-font-head: 'Manrope', system-ui, sans-serif; --aw-font-body: 'Manrope', system-ui, sans-serif; }
.aw-s-saas .aw-hero-media { position: relative; isolation: isolate; }
.aw-s-saas .aw-hero-media::before { content: ""; position: absolute; inset: 10% 8% -4%; z-index: -1; background: var(--aw-grad); filter: blur(64px); opacity: .32; border-radius: 50%; }
.aw-s-saas .aw-ico { background: linear-gradient(135deg, color-mix(in srgb, var(--aw-primary) 16%, transparent), color-mix(in srgb, var(--aw-accent) 12%, transparent)); }

/* ============================== Apple ============================== */
.aw-s-apple {
	--aw-font-head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
	--aw-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
	--aw-hw: 700; --aw-hls: -0.035em; --aw-hlh: 1.05;
	--aw-r: 24px; --aw-rbtn: 999px; --aw-bw: 0px;
	--aw-shadow: none; --aw-shadow-h: 0 22px 44px -18px rgba(0,0,0,.18); --aw-btn-shadow: none;
	--aw-cardpad: calc(32px * var(--aw-dk, 1)); --aw-pad: calc(120px * var(--aw-dens, 1));
}
.aw-s-apple .aw-h1 { font-size: clamp(calc(44px * var(--aw-hk2, 1)), calc(7.6cqi * var(--aw-hk, 1)), calc(100px * var(--aw-hk, 1))); }
.aw-s-apple .aw-h2 { font-size: clamp(calc(32px * var(--aw-hk2, 1)), calc(5cqi * var(--aw-hk, 1)), calc(64px * var(--aw-hk, 1))); }
.aw-s-apple .aw-lead { font-weight: 500; font-size: clamp(calc(18px * var(--aw-hk3, 1)), calc(2.2cqi * var(--aw-hk2, 1)), calc(25px * var(--aw-hk2, 1))); letter-spacing: -0.01em; }
.aw-s-apple .aw-eyebrow { background: none; padding: 0; text-transform: none; letter-spacing: -0.01em; font-size: clamp(calc(17px * var(--aw-hk3, 1)), calc(2cqi * var(--aw-hk2, 1)), calc(22px * var(--aw-hk2, 1))); font-weight: 600; background-image: var(--aw-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aw-s-apple .aw-card, .aw-s-apple .aw-qa, .aw-s-apple .aw-steps--cards .aw-step { background: var(--aw-alt); }
.aw-s-apple.aw-bg-alt .aw-card, .aw-s-apple .aw-bg-alt .aw-card, .aw-s-apple.aw-bg-alt .aw-qa { background: var(--aw-surface); }
.aw-s-apple .aw-btn { padding-inline: 24px; font-weight: 500; font-size: calc(17px * var(--aw-tk, 1)); }
.aw-s-apple .aw-btn--ghost { border-color: transparent; color: var(--aw-primary); padding-inline: 10px; }
.aw-s-apple .aw-btn--ghost::after { content: "›"; font-size: 1.25em; line-height: 1; margin-top: -2px; }
.aw-s-apple .aw-btn--ghost:hover { border-color: transparent; text-decoration: underline !important; color: var(--aw-primary); }
.aw-s-apple .aw-hero-media .aw-img { border: 0; }
.aw-s-apple .aw-plan--hot { box-shadow: 0 0 0 2px var(--aw-primary); }

/* ============================== Liquid Glass ============================== */
.aw-s-liquid {
	--aw-font-head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
	--aw-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
	--aw-hw: 700; --aw-hls: -0.032em; --aw-hlh: 1.06;
	--aw-r: 28px; --aw-rbtn: 999px; --aw-bw: 1px;
	--aw-cb: rgba(255,255,255,.55);
	--aw-glass: linear-gradient(145deg, color-mix(in srgb, var(--aw-surface) 62%, transparent), color-mix(in srgb, var(--aw-surface) 26%, transparent));
	--aw-glass-in: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), inset 0 0 22px rgba(255,255,255,.22), inset 0 -10px 24px -14px rgba(0,0,0,.12);
	--aw-shadow: var(--aw-glass-in), 0 16px 40px -16px rgba(30,30,80,.28);
	--aw-shadow-h: var(--aw-glass-in), 0 28px 60px -20px rgba(30,30,80,.38);
	--aw-btn-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(0,0,0,.18), 0 12px 28px -10px color-mix(in srgb, var(--awc-primary) 70%, transparent);
	--aw-spring: cubic-bezier(.34, 1.56, .64, 1);
}
.aw-s-liquid.aw-dark, .aw-dark .aw-s-liquid { --aw-cb: rgba(255,255,255,.16); --aw-glass-in: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 22px rgba(255,255,255,.05); --aw-shadow: var(--aw-glass-in), 0 20px 50px -20px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark) { .aw-s-liquid.aw-auto { --aw-cb: rgba(255,255,255,.16); --aw-glass-in: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 22px rgba(255,255,255,.05); --aw-shadow: var(--aw-glass-in), 0 20px 50px -20px rgba(0,0,0,.7); } }
/* Живой «меш»-фон за стеклом */
.aw-s-liquid.aw-bg-default, .aw-s-liquid .aw-bg-default:not(.aw-cta) {
	background: radial-gradient(55% 55% at 6% 10%, color-mix(in srgb, var(--aw-b1) calc(42% * var(--aw-bgk, 1)), transparent), transparent 70%),
		radial-gradient(50% 50% at 96% 22%, color-mix(in srgb, var(--aw-b2) calc(38% * var(--aw-bgk, 1)), transparent), transparent 70%),
		radial-gradient(60% 55% at 45% 105%, color-mix(in srgb, var(--aw-b3) calc(30% * var(--aw-bgk, 1)), transparent), transparent 70%), var(--aw-bg);
}
.aw-s-liquid.aw-bg-alt {
	background: radial-gradient(50% 55% at 92% 88%, color-mix(in srgb, var(--aw-b1) calc(38% * var(--aw-bgk, 1)), transparent), transparent 70%),
		radial-gradient(55% 50% at 4% 30%, color-mix(in srgb, var(--aw-b3) calc(34% * var(--aw-bgk, 1)), transparent), transparent 70%), var(--aw-alt);
}
.aw-s-liquid .aw-aurora i { opacity: .8; filter: blur(60px); }
/* Стеклянные поверхности */
.aw-s-liquid :is(.aw-card, .aw-qa, .aw-btn--ghost, .aw-eyebrow, .aw-contact, .aw-steps--cards .aw-step) {
	background: var(--aw-glass);
	-webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
	border-color: var(--aw-cb);
}
.aw-s-liquid .aw-card { transition: transform .6s var(--aw-spring), box-shadow .5s var(--aw-ease), background .4s; }
/* Ободок-линза (градиентная кромка) и блик за курсором */
.aw-s-liquid :is(.aw-card, .aw-btn)::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; z-index: 0;
	background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.12) 32%, rgba(255,255,255,0) 58%, rgba(255,255,255,.55));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.aw-s-liquid :is(.aw-card, .aw-btn)::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
	background: radial-gradient(360px circle at var(--mx, 18%) var(--my, -12%), rgba(255,255,255,.5), transparent 45%);
	mix-blend-mode: soft-light; opacity: .75; transition: opacity .4s;
}
.aw-s-liquid :is(.aw-card, .aw-btn):hover::after { opacity: 1; }
.aw-s-liquid :is(.aw-item-body, .aw-review > *, .aw-plan > *, .aw-contact > *, .aw-img) { position: relative; z-index: 1; }
.aw-s-liquid .aw-plan-badge { position: absolute; z-index: 2; }
.aw-s-liquid :is(.aw-product-img, .aw-post-img) { z-index: 1; }
.aw-s-liquid .aw-badge { z-index: 3; }
.aw-s-liquid[data-aw-hover="lift"] .aw-card:is(.aw-item, .aw-plan, .aw-review, .aw-contact):hover { transform: translateY(-6px) scale(1.015); }
.aw-s-liquid .aw-btn { transition: transform .5s var(--aw-spring), box-shadow .3s, filter .3s; }
.aw-s-liquid .aw-btn:active { transform: scale(.96); }
.aw-s-liquid .aw-btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--aw-primary) 78%, #fff), var(--aw-primary) 55%); border-color: rgba(255,255,255,.35); }
.aw-s-liquid .aw-btn--ghost { box-shadow: var(--aw-glass-in), 0 8px 24px -12px rgba(30,30,80,.3); border-color: var(--aw-cb); }
.aw-s-liquid .aw-eyebrow { box-shadow: var(--aw-glass-in); border: 1px solid var(--aw-cb); color: var(--aw-text); }
.aw-s-liquid .aw-ico { background: linear-gradient(145deg, color-mix(in srgb, var(--aw-primary) 22%, rgba(255,255,255,.5)), color-mix(in srgb, var(--aw-accent) 14%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px -6px color-mix(in srgb, var(--aw-primary) 50%, transparent); }
.aw-s-liquid .aw-hero-media .aw-img, .aw-s-liquid .aw-split-media .aw-img { border: 1px solid var(--aw-cb); box-shadow: var(--aw-shadow-h); }
.aw-s-liquid .aw-step-n { background: var(--aw-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--aw-glass-in); border-color: var(--aw-cb); color: var(--aw-text); }
.aw-s-liquid .aw-qa[open] .aw-qa-i { background: var(--aw-primary); }
/* Плавающие «капли-линзы» в hero */
.aw-s-liquid .aw-aurora::before, .aw-s-liquid .aw-aurora::after {
	content: ""; position: absolute; border-radius: 50%; aspect-ratio: 1;
	-webkit-backdrop-filter: blur(3px) saturate(170%) brightness(1.08); backdrop-filter: blur(3px) saturate(170%) brightness(1.08);
	background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.7), rgba(255,255,255,.12) 38%, rgba(255,255,255,.03) 64%, rgba(255,255,255,.18) 100%);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 10px 14px 30px rgba(255,255,255,.4), inset -14px -18px 34px rgba(0,0,0,.1), 0 30px 60px -24px rgba(30,30,80,.35);
}
.aw-s-liquid .aw-aurora::before { width: clamp(120px, 24cqi, 340px); right: -3%; bottom: -8%; animation: aw-lens1 17s ease-in-out infinite alternate; }
.aw-s-liquid .aw-aurora::after { width: clamp(70px, 11cqi, 160px); left: -2%; top: 6%; animation: aw-lens2 13s ease-in-out infinite alternate; }
@keyframes aw-lens1 { 0% { transform: translate(0, 0) scale(1); border-radius: 50%; } 50% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; } 100% { transform: translate(-40%, -30%) scale(1.08); border-radius: 50%; } }
@keyframes aw-lens2 { to { transform: translate(60%, 40%) scale(.9); } }
.aw-still.aw-s-liquid .aw-aurora::before, .aw-still.aw-s-liquid .aw-aurora::after { animation: none; }

/* ============================== Glassmorphism ============================== */
.aw-s-glass {
	--aw-font-head: 'Manrope', system-ui, sans-serif; --aw-font-body: 'Manrope', system-ui, sans-serif;
	--aw-r: 22px; --aw-rbtn: 14px; --aw-cb: rgba(255,255,255,.55);
	--aw-shadow: 0 8px 32px rgba(31,38,135,.13); --aw-shadow-h: 0 16px 48px rgba(31,38,135,.22);
}
.aw-s-glass.aw-dark, .aw-dark .aw-s-glass { --aw-cb: rgba(255,255,255,.14); --aw-shadow: 0 8px 32px rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark) { .aw-s-glass.aw-auto { --aw-cb: rgba(255,255,255,.14); --aw-shadow: 0 8px 32px rgba(0,0,0,.35); } }
.aw-s-glass.aw-bg-default, .aw-s-glass.aw-bg-alt, .aw-s-glass .aw-bg-default:not(.aw-cta) {
	background: radial-gradient(40% 50% at 12% 18%, color-mix(in srgb, var(--aw-b1) calc(60% * var(--aw-bgk, 1)), transparent), transparent 70%),
		radial-gradient(38% 46% at 88% 30%, color-mix(in srgb, var(--aw-b2) calc(55% * var(--aw-bgk, 1)), transparent), transparent 70%),
		radial-gradient(45% 50% at 50% 100%, color-mix(in srgb, var(--aw-b3) calc(45% * var(--aw-bgk, 1)), transparent), transparent 70%), var(--aw-bg);
}
.aw-s-glass .aw-aurora i { opacity: .85; }
.aw-s-glass :is(.aw-card, .aw-qa, .aw-eyebrow, .aw-btn--ghost, .aw-steps--cards .aw-step) {
	background: color-mix(in srgb, var(--aw-surface) 38%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid var(--aw-cb);
}
.aw-s-glass .aw-eyebrow { color: var(--aw-text); }
.aw-s-glass .aw-ico { background: color-mix(in srgb, var(--aw-surface) 55%, transparent); border: 1px solid var(--aw-cb); }
.aw-s-glass .aw-hero-media .aw-img, .aw-s-glass .aw-split-media .aw-img { border: 1px solid var(--aw-cb); }

/* ============================== Bento ============================== */
.aw-s-bento {
	--aw-font-head: 'Onest', system-ui, sans-serif; --aw-font-body: 'Onest', system-ui, sans-serif;
	--aw-hw: 700; --aw-hls: -0.04em; --aw-hlh: 1.04;
	--aw-r: 28px; --aw-rbtn: 999px; --aw-bw: 0px;
	--aw-shadow: none; --aw-shadow-h: 0 24px 48px -24px rgba(0,0,0,.22); --aw-btn-shadow: none;
	--aw-gap: calc(16px * var(--aw-dk, 1)); --aw-cardpad: calc(30px * var(--aw-dk, 1));
}
.aw-s-bento .aw-card, .aw-s-bento .aw-qa, .aw-s-bento .aw-steps--cards .aw-step { background: var(--aw-alt); }
.aw-s-bento.aw-bg-alt .aw-card, .aw-s-bento.aw-bg-alt .aw-qa { background: var(--aw-surface); }
.aw-s-bento .aw-grid--bento > .aw-item:nth-child(5n+1) { background: var(--awc-text); --aw-text: var(--awc-bg); --aw-muted: color-mix(in srgb, var(--awc-bg) 68%, transparent); color: var(--awc-bg); }
.aw-s-bento .aw-grid--bento > .aw-item:nth-child(5n+1) .aw-ico { background: color-mix(in srgb, var(--awc-bg) 12%, transparent); color: var(--awc-bg); }
.aw-s-bento .aw-grid--bento > .aw-item:nth-child(5n+4) { background: color-mix(in srgb, var(--aw-primary) 12%, var(--aw-alt)); }
.aw-s-bento .aw-eyebrow { background: none; padding: 0; text-transform: none; letter-spacing: 0; font-size: calc(15px * var(--aw-tk, 1)); font-weight: 600; color: var(--aw-muted); }
.aw-s-bento .aw-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aw-primary); }
.aw-s-bento .aw-ico { background: var(--aw-surface); border-radius: 14px; }

/* ============================== Минимализм / Swiss ============================== */
.aw-s-minimal {
	--aw-font-head: 'Onest', system-ui, sans-serif; --aw-font-body: 'Onest', system-ui, sans-serif;
	--aw-hw: 600; --aw-hls: -0.035em; --aw-hlh: 1.02;
	--aw-r: 4px; --aw-rbtn: 2px; --aw-bw: 1px;
	--aw-shadow: none; --aw-shadow-h: none; --aw-btn-shadow: none;
}
.aw-s-minimal .aw-h1 { font-size: clamp(calc(42px * var(--aw-hk2, 1)), calc(7.2cqi * var(--aw-hk, 1)), calc(96px * var(--aw-hk, 1))); }
.aw-s-minimal .aw-hl { background: none; -webkit-text-fill-color: currentColor; color: var(--aw-muted); }
.aw-s-minimal .aw-eyebrow { background: none; padding: 0; border-radius: 0; font-weight: 500; letter-spacing: .12em; color: var(--aw-muted); gap: 12px; }
.aw-s-minimal .aw-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.aw-s-minimal .aw-card { background: transparent; }
.aw-s-minimal .aw-card:is(.aw-item, .aw-plan, .aw-review, .aw-contact):hover { transform: none; background: var(--aw-alt); }
.aw-s-minimal .aw-ico { background: none; border: 1px solid var(--aw-border); border-radius: 2px; color: var(--aw-text); }
.aw-s-minimal .aw-btn--ghost { border-color: var(--aw-text); }
.aw-s-minimal .aw-btn--ghost:hover { background: var(--aw-text); color: var(--aw-bg); }
.aw-s-minimal :is(.aw-stat-v, .aw-steps--cards .aw-step-n) { background: none; -webkit-text-fill-color: currentColor; color: var(--aw-text); font-weight: 500; }
.aw-s-minimal .aw-stat { text-align: left; }
.aw-s-minimal .aw-step-n { border-width: 1px; color: var(--aw-text); border-color: var(--aw-text); font-family: var(--aw-font-mono); font-weight: 500; font-size: calc(15px * var(--aw-tk, 1)); }
.aw-s-minimal .aw-steps--line .aw-step:not(:last-child)::after { background: var(--aw-border); height: 1px; }
.aw-s-minimal .aw-qa { border-width: 0 0 1px; border-radius: 0; background: none; }
.aw-s-minimal .aw-qa summary { padding-inline: 0; }
.aw-s-minimal .aw-qa-a { padding-inline: 0; }
.aw-s-minimal .aw-qa-i { background: none; border: 1px solid var(--aw-border); }
.aw-s-minimal .aw-ava { background: var(--aw-text); color: var(--aw-bg); }
.aw-s-minimal .aw-plan-badge { background: var(--aw-text); color: var(--aw-bg); box-shadow: none; border-radius: 2px; }
.aw-s-minimal .aw-plan--hot { box-shadow: 0 0 0 1px var(--aw-text); border-color: var(--aw-text); }
.aw-s-minimal .aw-checks li::before { background: none; content: "—"; color: var(--aw-muted); }
.aw-s-minimal .aw-cta.aw-bg-gradient { background: var(--awc-text); color: var(--awc-bg); --aw-text: var(--awc-bg); --aw-muted: color-mix(in srgb, var(--awc-bg) 70%, transparent); --aw-primary: var(--awc-bg); --aw-onp: var(--awc-text); }
.aw-s-minimal .aw-cta.aw-bg-gradient::before { display: none; }

/* ============================== Необрутализм ============================== */
.aw-s-brutal {
	--aw-font-head: 'Unbounded', 'Rubik', system-ui, sans-serif; --aw-font-body: 'Rubik', system-ui, sans-serif;
	--aw-hw: 800; --aw-hls: -0.02em; --aw-hlh: 1.1;
	--aw-r: 14px; --aw-rbtn: 12px; --aw-bw: 3px;
	--aw-cb: var(--aw-text);
	--aw-shadow: 6px 6px 0 var(--aw-text); --aw-shadow-h: 10px 10px 0 var(--aw-text);
	--aw-btn-shadow: 4px 4px 0 var(--aw-text);
	--aw-cardpad: calc(26px * var(--aw-dk, 1));
}
.aw-s-brutal .aw-h1 { font-size: clamp(calc(34px * var(--aw-hk2, 1)), calc(5.8cqi * var(--aw-hk, 1)), calc(72px * var(--aw-hk, 1))); }
.aw-s-brutal .aw-h2 { font-size: clamp(calc(28px * var(--aw-hk2, 1)), calc(4cqi * var(--aw-hk, 1)), calc(48px * var(--aw-hk, 1))); }
.aw-s-brutal.aw-sec:not(.aw-bg-default) { border-block: 3px solid var(--aw-text); }
.aw-s-brutal .aw-hl { background: var(--aw-b1); -webkit-text-fill-color: #111; color: #111; display: inline-block; padding: 0 .18em; margin: .05em 0; border: 3px solid #111; border-radius: 10px; box-shadow: 4px 4px 0 #111; transform: rotate(-1.5deg); }
.aw-s-brutal .aw-eyebrow { background: var(--aw-b1); color: #111; border: 2px solid #111; border-radius: 8px; box-shadow: 3px 3px 0 #111; transform: rotate(-2deg); letter-spacing: .06em; }
.aw-s-brutal .aw-btn { border-color: var(--aw-text); font-weight: 700; transition: transform .15s, box-shadow .15s; }
.aw-s-brutal .aw-btn--primary { color: #111; }
.aw-s-brutal .aw-btn--primary:hover { filter: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--aw-text); color: #111; }
.aw-s-brutal .aw-btn--ghost { background: var(--aw-surface); box-shadow: 4px 4px 0 var(--aw-text); }
.aw-s-brutal .aw-btn--ghost:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--aw-text); }
.aw-s-brutal .aw-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--aw-text); }
.aw-s-brutal .aw-card:is(.aw-item, .aw-plan, .aw-review, .aw-contact):hover { transform: translate(-3px, -3px); box-shadow: var(--aw-shadow-h); }
.aw-s-brutal :is(.aw-grid, .aw-reviews) > .aw-card:nth-child(4n+1) { background: color-mix(in srgb, var(--aw-b1) 60%, var(--aw-surface)); }
.aw-s-brutal :is(.aw-grid, .aw-reviews) > .aw-card:nth-child(4n+2) { background: color-mix(in srgb, var(--aw-primary) 32%, var(--aw-surface)); }
.aw-s-brutal :is(.aw-grid, .aw-reviews) > .aw-card:nth-child(4n+3) { background: color-mix(in srgb, var(--aw-accent) 36%, var(--aw-surface)); }
.aw-s-brutal .aw-item .aw-txt { color: color-mix(in srgb, var(--aw-text) 82%, transparent); }
.aw-s-brutal .aw-ico { background: var(--aw-surface); border: 2px solid var(--aw-text); border-radius: 10px; box-shadow: 3px 3px 0 var(--aw-text); }
.aw-s-brutal .aw-img { border: 3px solid var(--aw-text); }
.aw-s-brutal :is(.aw-hero-media, .aw-split-media, .aw-gal-i, .aw-imgblock) .aw-img { box-shadow: 8px 8px 0 var(--aw-text); }
.aw-s-brutal .aw-img--card { border-width: 0 0 3px; box-shadow: none; }
.aw-s-brutal .aw-tile { border: 3px solid var(--aw-text); box-shadow: var(--aw-shadow); }
.aw-s-brutal .aw-tile .aw-img { border: 0; }
.aw-s-brutal .aw-stat-v { background: none; -webkit-text-fill-color: var(--aw-text); color: var(--aw-text); text-shadow: 4px 4px 0 var(--aw-primary); }
.aw-s-brutal .aw-step-n { border: 3px solid var(--aw-text); color: var(--aw-text); background: var(--aw-b1); box-shadow: 4px 4px 0 var(--aw-text); border-radius: 14px; }
.aw-s-brutal .aw-steps--line .aw-step:not(:last-child)::after { background: var(--aw-text); height: 3px; }
.aw-s-brutal .aw-plan-badge { background: var(--aw-b1); color: #111; border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
.aw-s-brutal .aw-plan--hot { background: color-mix(in srgb, var(--aw-primary) 22%, var(--aw-surface)); }
.aw-s-brutal .aw-qa-i { border: 2px solid var(--aw-text); background: var(--aw-b1); }
.aw-s-brutal .aw-qa-i::before, .aw-s-brutal .aw-qa-i::after, .aw-s-brutal .aw-qa[open] .aw-qa-i::before, .aw-s-brutal .aw-qa[open] .aw-qa-i::after { background: #111; }
.aw-s-brutal .aw-qa[open] .aw-qa-i { background: var(--aw-primary); }
.aw-s-brutal .aw-ava { border: 2px solid var(--aw-text); background: var(--aw-accent); color: #111; }
.aw-s-brutal.aw-sec--marquee { background: var(--aw-b1); border-block: 3px solid var(--aw-text); }
.aw-s-brutal.aw-sec--marquee .aw-mq-i { color: #111; }
.aw-s-brutal.aw-sec--marquee .aw-mq-sep { color: #111; }
.aw-s-brutal .aw-cta { border: 3px solid var(--aw-text); box-shadow: 10px 10px 0 var(--aw-text); }
.aw-s-brutal .aw-cta.aw-bg-gradient { background: var(--awc-primary); --aw-text: #111; --aw-muted: #222; --aw-primary: #111; --aw-onp: #fff; color: #111; }
.aw-s-brutal .aw-cta.aw-bg-gradient::before { display: none; }
.aw-s-brutal .aw-cta.aw-bg-gradient .aw-btn--primary, .aw-s-brutal .aw-cta.aw-bg-gradient .aw-btn--primary:hover { background: #111; color: #fff; }
.aw-s-brutal .aw-cta.aw-bg-gradient .aw-btn--ghost { background: #fff; color: #111; }
.aw-s-brutal .aw-stat-v { font-size: clamp(calc(30px * var(--aw-hk2, 1)), calc(4.2cqi * var(--aw-hk, 1)), calc(52px * var(--aw-hk, 1))); }
.aw-s-brutal .aw-checks li::before { background: var(--aw-b1); color: #111; border: 2px solid #111; }
.aw-s-brutal .aw-badges li::before { color: var(--aw-text); }

/* ============================== Dark Tech / Неон ============================== */
.aw-s-neon {
	--aw-font-head: 'Geologica', system-ui, sans-serif; --aw-font-body: 'Geologica', system-ui, sans-serif;
	--aw-hw: 700; --aw-hls: -0.035em; --aw-hlh: 1.05;
	--aw-r: 16px; --aw-rbtn: 10px; --aw-bw: 1px;
	--aw-cb: color-mix(in srgb, var(--awc-primary) 16%, var(--awc-border));
	--aw-shadow: none;
	--aw-shadow-h: 0 0 0 1px color-mix(in srgb, var(--awc-primary) 50%, transparent), 0 20px 60px -20px color-mix(in srgb, var(--awc-primary) 60%, transparent);
	--aw-btn-shadow: 0 0 28px -4px color-mix(in srgb, var(--awc-primary) 75%, transparent);
}
.aw-s-neon.aw-bg-default { background: radial-gradient(ellipse 50% 40% at 50% 0%, color-mix(in srgb, var(--aw-primary) 9%, transparent), transparent 70%), var(--aw-bg); }
.aw-s-neon .aw-hl { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--aw-primary) 45%, transparent)); }
.aw-s-neon .aw-eyebrow { font-family: var(--aw-font-mono); font-weight: 500; letter-spacing: .1em; background: color-mix(in srgb, var(--aw-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--aw-primary) 35%, transparent); border-radius: 6px; }
.aw-s-neon .aw-eyebrow::before { content: "//"; opacity: .7; }
.aw-s-neon .aw-card { background: linear-gradient(180deg, color-mix(in srgb, var(--aw-text) 5%, transparent), color-mix(in srgb, var(--aw-text) 1.5%, transparent)); }
.aw-s-neon .aw-card::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, var(--aw-primary), transparent); opacity: .7; }
.aw-s-neon .aw-card:hover { border-color: color-mix(in srgb, var(--aw-primary) 55%, transparent); }
.aw-s-neon .aw-ico { background: transparent; border: 1px solid color-mix(in srgb, var(--aw-primary) 40%, transparent); box-shadow: 0 0 20px -6px color-mix(in srgb, var(--aw-primary) 80%, transparent), inset 0 0 14px -6px var(--aw-primary); }
.aw-s-neon .aw-btn--ghost { border-color: color-mix(in srgb, var(--aw-primary) 45%, transparent); color: var(--aw-primary); }
.aw-s-neon .aw-btn--ghost:hover { border-color: var(--aw-primary); box-shadow: var(--aw-btn-shadow); color: var(--aw-primary); }
.aw-s-neon :is(.aw-tag, .aw-tl-date, .aw-plan-name, .aw-step-n, .aw-contact small) { font-family: var(--aw-font-mono); }
.aw-s-neon .aw-stat-v { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--aw-primary) 50%, transparent)); }
.aw-s-neon .aw-step-n { box-shadow: 0 0 0 7px var(--aw-secbg), 0 0 24px -2px color-mix(in srgb, var(--aw-primary) 70%, transparent); }
.aw-s-neon .aw-hero-media .aw-img, .aw-s-neon .aw-split-media .aw-img { border: 1px solid color-mix(in srgb, var(--aw-primary) 30%, transparent); box-shadow: 0 0 80px -20px color-mix(in srgb, var(--aw-primary) 55%, transparent); }
.aw-s-neon .aw-mq-i { -webkit-text-stroke: 1px color-mix(in srgb, var(--aw-text) 50%, transparent); color: transparent; }
.aw-s-neon .aw-mq-i:nth-child(4n+1) { color: var(--aw-primary); -webkit-text-stroke: 0; text-shadow: 0 0 20px color-mix(in srgb, var(--aw-primary) 60%, transparent); }

/* ============================== Журнальный ============================== */
.aw-s-editorial {
	--aw-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif; --aw-font-body: 'PT Serif', Georgia, serif;
	--aw-hw: 700; --aw-hls: -0.015em; --aw-hlh: 1.1;
	--aw-r: 0px; --aw-rbtn: 0px; --aw-bw: 0px;
	--aw-shadow: none; --aw-shadow-h: none; --aw-btn-shadow: none;
	--aw-fs: 18px; --aw-lh: 1.7;
}
.aw-s-editorial.aw-sec + .aw-s-editorial.aw-sec:not(.aw-bg-dark) { border-top: 1px solid var(--aw-border); }
.aw-s-editorial .aw-hl { background: none; -webkit-text-fill-color: var(--aw-primary); color: var(--aw-primary); font-style: italic; }
.aw-s-editorial .aw-eyebrow { background: none; padding: 0; border-radius: 0; font-family: var(--aw-font-body); font-weight: 700; letter-spacing: .2em; font-size: calc(12px * var(--aw-tk, 1)); color: var(--aw-primary); gap: 14px; }
.aw-s-editorial .aw-eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.aw-s-editorial .aw-card { background: transparent; border-top: 2px solid var(--aw-text); }
.aw-s-editorial .aw-item-body { padding: 22px 0 0; }
.aw-s-editorial .aw-grid--images .aw-item { border-top: 0; }
.aw-s-editorial .aw-card:is(.aw-item, .aw-plan, .aw-review, .aw-contact):hover { transform: none; }
.aw-s-editorial .aw-ico { background: none; width: auto; height: auto; font-size: calc(30px * var(--aw-hk, 1)); }
.aw-s-editorial .aw-btn { font-family: var(--aw-font-body); font-weight: 700; letter-spacing: .04em; }
.aw-s-editorial .aw-btn--primary { background: var(--aw-text); color: var(--aw-bg); }
.aw-s-editorial .aw-btn--primary:hover { background: var(--aw-primary); color: var(--aw-onp); }
.aw-s-editorial .aw-btn--ghost { border-width: 0 0 2px; border-color: var(--aw-text); padding-inline: 2px; }
.aw-s-editorial .aw-textblock > p:first-child::first-letter, .aw-s-editorial .aw-textblock.aw-rich > p:first-child::first-letter { float: left; font-family: var(--aw-font-head); font-weight: 700; font-size: 4.3em; line-height: .82; padding: .06em .1em 0 0; color: var(--aw-primary); }
.aw-s-editorial :is(.aw-stat-v, .aw-steps--cards .aw-step-n) { background: none; -webkit-text-fill-color: currentColor; color: var(--aw-text); font-weight: 600; }
.aw-s-editorial .aw-stat-l { font-style: italic; font-weight: 400; }
.aw-s-editorial .aw-step-n { font-style: italic; border-width: 1px; }
.aw-s-editorial .aw-review { padding: 24px 0 0; }
.aw-s-editorial .aw-review blockquote { font-family: var(--aw-font-head); font-size: calc(21px * var(--aw-hk2, 1)); line-height: 1.5; font-style: italic; }
.aw-s-editorial .aw-review blockquote::before { content: "“"; display: block; font-size: calc(64px * var(--aw-hk, 1)); line-height: .6; color: var(--aw-primary); margin-bottom: 8px; }
.aw-s-editorial .aw-qa { background: none; border-bottom: 1px solid var(--aw-border); }
.aw-s-editorial .aw-qa summary { padding-inline: 0; font-family: var(--aw-font-head); font-size: calc(20px * var(--aw-hk2, 1)); font-weight: 600; }
.aw-s-editorial .aw-qa-a { padding-inline: 0; }
.aw-s-editorial .aw-plan { border: 1px solid var(--aw-border); border-top: 3px solid var(--aw-text); }
.aw-s-editorial .aw-plan--hot { border-top-color: var(--aw-primary); box-shadow: none; }
.aw-s-editorial .aw-contact { border-top: 1px solid var(--aw-border); padding-inline: 0; }

/* ============================== Люкс ============================== */
.aw-s-luxury {
	--aw-font-head: 'Cormorant Garamond', Georgia, serif; --aw-font-body: 'Manrope', system-ui, sans-serif;
	--aw-bw-body: 300; --aw-hw: 500; --aw-hls: 0; --aw-hlh: 1.04;
	--aw-r: 0px; --aw-rbtn: 0px; --aw-bw: 1px;
	--aw-cb: color-mix(in srgb, var(--awc-primary) 30%, transparent);
	--aw-shadow: none; --aw-shadow-h: none; --aw-btn-shadow: none;
	--aw-fs: 16.5px; --aw-lh: 1.8; --aw-pad: calc(128px * var(--aw-dens, 1));
}
.aw-s-luxury .aw-h1 { font-size: clamp(calc(46px * var(--aw-hk2, 1)), calc(7.4cqi * var(--aw-hk, 1)), calc(104px * var(--aw-hk, 1))); }
.aw-s-luxury .aw-h2 { font-size: clamp(calc(36px * var(--aw-hk2, 1)), calc(5.2cqi * var(--aw-hk, 1)), calc(68px * var(--aw-hk, 1))); }
.aw-s-luxury .aw-h3 { font-family: var(--aw-font-head); font-size: calc(26px * var(--aw-hk, 1)); font-weight: 500; letter-spacing: 0; }
.aw-s-luxury .aw-lead { font-weight: 300; }
.aw-s-luxury .aw-hl { background: none; -webkit-text-fill-color: var(--aw-primary); color: var(--aw-primary); font-style: italic; }
.aw-s-luxury .aw-eyebrow { background: none; padding: 0; border-radius: 0; font-weight: 500; font-size: calc(12px * var(--aw-tk, 1)); letter-spacing: .34em; gap: 16px; }
.aw-s-luxury .aw-eyebrow::before, .aw-s-luxury :is(.aw-al-center, .aw-hero--center, .aw-cta) .aw-eyebrow::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .7; }
.aw-s-luxury .aw-btn { text-transform: uppercase; letter-spacing: .2em; font-size: calc(12.5px * var(--aw-tk, 1)); font-weight: 600; padding: 17px 34px; }
.aw-s-luxury .aw-btn--ghost { border-color: var(--aw-primary); color: var(--aw-primary); }
.aw-s-luxury .aw-btn--ghost:hover { background: var(--aw-primary); color: var(--aw-onp); }
.aw-s-luxury .aw-card { background: color-mix(in srgb, var(--aw-surface) 50%, transparent); }
.aw-s-luxury .aw-card:is(.aw-item, .aw-plan, .aw-review, .aw-contact):hover { transform: none; border-color: color-mix(in srgb, var(--aw-primary) 75%, transparent); }
.aw-s-luxury .aw-ico { background: none; border: 1px solid var(--aw-cb); border-radius: 50%; color: var(--aw-primary); }
.aw-s-luxury :is(.aw-split-media, .aw-hero-media) { position: relative; isolation: isolate; }
.aw-s-luxury :is(.aw-split-media, .aw-hero--split .aw-hero-media)::after { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1; border: 1px solid color-mix(in srgb, var(--aw-primary) 60%, transparent); pointer-events: none; }
.aw-s-luxury .aw-split-media .aw-img, .aw-s-luxury .aw-hero-media .aw-img { box-shadow: none; border: 0; }
.aw-s-luxury :is(.aw-stat-v, .aw-steps--cards .aw-step-n) { background: none; -webkit-text-fill-color: var(--aw-primary); color: var(--aw-primary); font-weight: 500; letter-spacing: 0; }
.aw-s-luxury .aw-stat-l { font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: calc(12.5px * var(--aw-tk, 1)); }
.aw-s-luxury .aw-step-n { font-family: var(--aw-font-head); font-style: italic; font-size: calc(24px * var(--aw-hk2, 1)); border-width: 1px; }
.aw-s-luxury .aw-plan-name { letter-spacing: .24em; font-size: calc(12px * var(--aw-tk, 1)); }
.aw-s-luxury .aw-plan-badge { background: var(--aw-primary); color: var(--aw-onp); border-radius: 0; letter-spacing: .2em; box-shadow: none; }
.aw-s-luxury .aw-plan--hot { box-shadow: none; border-color: var(--aw-primary); }
.aw-s-luxury .aw-checks li::before { background: none; content: "◆"; font-size: calc(8px * var(--aw-tk, 1)); color: var(--aw-primary); }
.aw-s-luxury .aw-qa { background: none; border-width: 0 0 1px; }
.aw-s-luxury .aw-qa summary { padding-inline: 0; font-family: var(--aw-font-head); font-size: calc(23px * var(--aw-hk2, 1)); font-weight: 500; }
.aw-s-luxury .aw-qa-a { padding-inline: 0; }
.aw-s-luxury .aw-qa-i { background: none; border: 1px solid var(--aw-cb); }
.aw-s-luxury .aw-review blockquote { font-family: var(--aw-font-head); font-size: calc(22px * var(--aw-hk2, 1)); font-style: italic; line-height: 1.45; }
.aw-s-luxury .aw-stars { color: var(--aw-primary); }
.aw-s-luxury .aw-ava { background: none; border: 1px solid var(--aw-primary); color: var(--aw-primary); font-family: var(--aw-font-head); }
.aw-s-luxury .aw-mq-i { font-style: italic; font-weight: 500; }
.aw-s-luxury .aw-cta.aw-bg-gradient { background: color-mix(in srgb, var(--awc-primary) 10%, var(--awc-bg)); border: 1px solid var(--aw-cb); --aw-text: var(--awc-text); --aw-muted: var(--awc-muted); --aw-primary: var(--awc-primary); --aw-onp: var(--awc-onp); color: var(--awc-text); }
.aw-s-luxury .aw-cta.aw-bg-gradient::before { display: none; }

/* ============================== Clay ============================== */
.aw-s-clay {
	--aw-font-head: 'Nunito', system-ui, sans-serif; --aw-font-body: 'Nunito', system-ui, sans-serif;
	--aw-hw: 900; --aw-hls: -0.02em; --aw-hlh: 1.08; --aw-bw-body: 500;
	--aw-r: 32px; --aw-rbtn: 999px; --aw-bw: 0px;
	--aw-clay-in: inset -6px -8px 16px rgba(0,0,0,.06), inset 6px 6px 16px rgba(255,255,255,.9);
	--aw-shadow: 12px 16px 30px -10px color-mix(in srgb, var(--awc-primary) 24%, rgba(0,0,0,.08)), var(--aw-clay-in);
	--aw-shadow-h: 16px 24px 40px -12px color-mix(in srgb, var(--awc-primary) 34%, rgba(0,0,0,.1)), var(--aw-clay-in);
	--aw-btn-shadow: 0 12px 22px -8px color-mix(in srgb, var(--awc-primary) 65%, transparent), inset -4px -5px 10px rgba(0,0,0,.14), inset 4px 5px 10px rgba(255,255,255,.4);
	--aw-spring: cubic-bezier(.34, 1.56, .64, 1);
}
.aw-s-clay.aw-dark, .aw-dark .aw-s-clay { --aw-clay-in: inset -6px -8px 16px rgba(0,0,0,.3), inset 6px 6px 16px rgba(255,255,255,.06); --aw-shadow: 12px 16px 30px -10px rgba(0,0,0,.6), var(--aw-clay-in); }
@media (prefers-color-scheme: dark) { .aw-s-clay.aw-auto { --aw-clay-in: inset -6px -8px 16px rgba(0,0,0,.3), inset 6px 6px 16px rgba(255,255,255,.06); --aw-shadow: 12px 16px 30px -10px rgba(0,0,0,.6), var(--aw-clay-in); } }
.aw-s-clay .aw-card { transition: transform .55s var(--aw-spring), box-shadow .45s; }
.aw-s-clay .aw-card:is(.aw-item, .aw-plan, .aw-review, .aw-contact):hover { transform: translateY(-6px) rotate(-.6deg); }
.aw-s-clay :is(.aw-grid, .aw-reviews) > .aw-card:nth-child(4n+1) { background: color-mix(in srgb, var(--aw-b1) 24%, var(--aw-surface)); }
.aw-s-clay :is(.aw-grid, .aw-reviews) > .aw-card:nth-child(4n+2) { background: color-mix(in srgb, var(--aw-b2) 24%, var(--aw-surface)); }
.aw-s-clay :is(.aw-grid, .aw-reviews) > .aw-card:nth-child(4n+3) { background: color-mix(in srgb, var(--aw-b3) 28%, var(--aw-surface)); }
.aw-s-clay .aw-ico { width: 62px; height: 62px; border-radius: 22px; font-size: calc(30px * var(--aw-hk, 1)); background: var(--aw-surface); box-shadow: 6px 8px 16px -6px color-mix(in srgb, var(--awc-primary) 35%, rgba(0,0,0,.1)), var(--aw-clay-in); }
.aw-s-clay .aw-eyebrow { background: var(--aw-surface); box-shadow: 4px 6px 14px -6px color-mix(in srgb, var(--awc-primary) 30%, transparent), var(--aw-clay-in); text-transform: none; letter-spacing: 0; font-size: calc(15px * var(--aw-tk, 1)); font-weight: 800; }
.aw-s-clay .aw-btn { font-weight: 800; transition: transform .45s var(--aw-spring), box-shadow .3s; }
.aw-s-clay .aw-btn:hover { transform: translateY(-2px) scale(1.04); }
.aw-s-clay .aw-btn:active { transform: scale(.95); }
.aw-s-clay .aw-btn--ghost { background: var(--aw-surface); border-color: transparent; box-shadow: 6px 8px 18px -8px color-mix(in srgb, var(--awc-primary) 30%, rgba(0,0,0,.1)), var(--aw-clay-in); }
.aw-s-clay .aw-step-n { border: 0; background: var(--aw-surface); box-shadow: 0 0 0 7px var(--aw-secbg), 6px 8px 16px -6px color-mix(in srgb, var(--awc-primary) 40%, transparent), var(--aw-clay-in); }
.aw-s-clay :is(.aw-hero-media, .aw-split-media, .aw-gal-i) .aw-img { border: 6px solid var(--aw-surface); box-shadow: var(--aw-shadow); }
.aw-s-clay .aw-qa-i { box-shadow: var(--aw-clay-in); }

/* ============================== Organic ============================== */
.aw-s-organic {
	--aw-font-head: 'Lora', Georgia, serif; --aw-font-body: 'Manrope', system-ui, sans-serif;
	--aw-hw: 600; --aw-hls: -0.012em; --aw-hlh: 1.12;
	--aw-r: 26px; --aw-rbtn: 999px; --aw-bw: 0px;
	--aw-shadow: 0 12px 32px -16px color-mix(in srgb, var(--awc-primary) 34%, transparent);
	--aw-shadow-h: 0 24px 48px -20px color-mix(in srgb, var(--awc-primary) 45%, transparent);
	--aw-btn-shadow: 0 10px 24px -12px color-mix(in srgb, var(--awc-primary) 80%, transparent);
}
.aw-s-organic .aw-card { background: color-mix(in srgb, var(--aw-primary) 6%, var(--aw-surface)); }
.aw-s-organic .aw-hl { background: none; -webkit-text-fill-color: var(--aw-primary); color: var(--aw-primary); font-style: italic; text-decoration: underline wavy color-mix(in srgb, var(--aw-primary) 45%, transparent) 2px; text-underline-offset: .22em; text-decoration-skip-ink: none; }
.aw-s-organic .aw-eyebrow { font-family: var(--aw-font-head); font-style: italic; text-transform: none; letter-spacing: 0; font-size: calc(17px * var(--aw-tk, 1)); font-weight: 500; }
.aw-s-organic .aw-ico { border-radius: 42% 58% 55% 45% / 50% 42% 58% 50%; }
.aw-s-organic :is(.aw-split-media, .aw-hero-media) .aw-img { border-radius: 58% 42% 38% 62% / 52% 38% 62% 48%; box-shadow: none; animation: aw-blob 16s ease-in-out infinite alternate; }
@keyframes aw-blob { 0% { border-radius: 58% 42% 38% 62% / 52% 38% 62% 48%; } 50% { border-radius: 42% 58% 62% 38% / 44% 60% 40% 56%; } 100% { border-radius: 50% 50% 45% 55% / 60% 42% 58% 40%; } }
.aw-s-organic.aw-hero::before, .aw-s-organic.aw-hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1; animation: aw-blob 18s ease-in-out infinite alternate; }
.aw-s-organic.aw-hero::before { width: 40cqi; right: -12cqi; top: -14cqi; background: color-mix(in srgb, var(--aw-b1) 45%, transparent); }
.aw-s-organic.aw-hero::after { width: 24cqi; left: -8cqi; bottom: -10cqi; background: color-mix(in srgb, var(--aw-b2) 40%, transparent); animation-duration: 22s; }
.aw-still .aw-img, .aw-still.aw-hero::before, .aw-still.aw-hero::after { animation: none !important; }
.aw-s-organic .aw-step-n { border-radius: 42% 58% 55% 45% / 50% 42% 58% 50%; background: color-mix(in srgb, var(--aw-primary) 12%, var(--aw-secbg)); border: 0; }
.aw-s-organic .aw-steps--line .aw-step:not(:last-child)::after { background: none; border-top: 2px dashed color-mix(in srgb, var(--aw-primary) 40%, transparent); height: 0; }