.white-label-page { background: #fff; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px; color: var(--muted); font-size: .82rem; font-weight: 700; }.back-link svg { width: 17px; }
.wl-hero { min-height: 760px; padding: calc(var(--header-height) + 64px) 0 90px; overflow: hidden; background: radial-gradient(circle at 86% 14%, rgba(53,152,187,.14), transparent 27%), linear-gradient(180deg, #f6fbfd 0%, #fff 100%); }
.wl-hero-grid { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: clamp(48px, 6vw, 92px); }
.wl-hero h1 { max-width: 650px; margin-bottom: 18px; font-size: clamp(2.75rem, 4vw, 49px); line-height: 1.08; }
.wl-hero h2 { max-width: 640px; margin-bottom: 24px; color: var(--blue-700); font-family: "Inter", sans-serif; font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.35; letter-spacing: -.025em; }
.wl-hero-copy > p { max-width: 650px; font-size: 1.03rem; }
.wl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.wl-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--muted); font-size: .76rem; font-weight: 700; }.wl-trust span { display: inline-flex; align-items: center; gap: 7px; }.wl-trust svg { width: 17px; color: var(--blue-500); }

.brand-studio { position: relative; color: #d9e9f2; background: linear-gradient(145deg, #071d35, #0b3559); border: 1px solid rgba(80,210,238,.2); border-radius: 26px; box-shadow: 0 34px 80px rgba(7,36,64,.22); }
.brand-studio::before { content: ""; position: absolute; inset: -17px; z-index: -1; border: 1px solid rgba(53,152,187,.13); border-radius: 38px; }
.studio-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .68rem; }.studio-toolbar > span { display: flex; gap: 6px; }.studio-toolbar > span i { width: 7px; height: 7px; background: #647d91; border-radius: 50%; }.studio-toolbar > span i:first-child { background: #dc6b63; }.studio-toolbar > span i:nth-child(2) { background: #e2c34e; }.studio-toolbar > span i:nth-child(3) { background: #45ba7c; }.studio-toolbar strong { color: #fff; }.studio-toolbar small { justify-self: end; color: #83a4b8; }
.studio-body { display: grid; grid-template-columns: 190px 1fr; min-height: 430px; }
.studio-controls { padding: 18px; border-right: 1px solid rgba(255,255,255,.1); }.control-brand { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; color: #06213a; background: var(--cyan-400); border-radius: 10px; }.brand-mark svg { width: 18px; }.control-brand small, .control-brand strong { display: block; }.control-brand small { color: #7796aa; font-size: .55rem; }.control-brand strong { color: #fff; font-size: .7rem; }
.control-field { margin-top: 20px; }.control-field > span { display: block; margin-bottom: 8px; color: #8aa5b7; font-size: .58rem; font-weight: 700; }.upload-chip, .domain-field { padding: 9px; color: #cbe0eb; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; font-size: .55rem; }.upload-chip { display: flex; align-items: center; gap: 6px; }.upload-chip svg { width: 14px; color: var(--cyan-400); }.domain-field { overflow: hidden; color: #8fa9b9; white-space: nowrap; }
.color-row { display: flex; gap: 7px; }.color-row i { width: 25px; height: 25px; background: #082f55; border: 2px solid rgba(255,255,255,.13); border-radius: 7px; }.color-row i:nth-child(2) { background: #3598bb; }.color-row i:nth-child(3) { background: #50d2ee; }.color-row i:nth-child(4) { background: #f1bd38; }
.control-ready { display: flex; align-items: center; gap: 6px; margin-top: 25px; padding: 9px; color: #80d6a6; background: rgba(58,196,118,.08); border: 1px solid rgba(58,196,118,.14); border-radius: 8px; font-size: .55rem; font-weight: 700; }.control-ready svg { width: 14px; }
.studio-preview { padding: 19px; }.preview-browser { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; height: 31px; padding: 0 10px; color: #809bad; background: #edf6f9; border-radius: 10px 10px 0 0; font-size: .52rem; }.preview-browser > span:first-child { width: 6px; height: 6px; background: #69b7ca; border-radius: 50%; }.preview-browser > span:nth-child(2) { padding: 5px 8px; color: #607b8e; background: #fff; border-radius: 5px; }.preview-browser svg { width: 11px; }
.preview-app { display: grid; grid-template-columns: 47px 1fr; min-height: 340px; overflow: hidden; background: #f8fbfc; border-radius: 0 0 12px 12px; }.preview-sidebar { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 15px 8px; color: #79a2b4; background: #092e52; }.preview-sidebar > svg { width: 17px; }.preview-logo { display: flex; align-items: center; gap: 5px; padding-bottom: 13px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }.preview-logo svg { width: 17px; color: var(--cyan-400); }.preview-logo span { display: none; }
.preview-content { padding: 22px; }.preview-head { display: flex; align-items: center; justify-content: space-between; }.preview-head small, .preview-head strong { display: block; }.preview-head small { color: #91a9b5; font-size: .52rem; }.preview-head strong { color: #173b53; font-size: .72rem; }.preview-head > span { padding: 7px 9px; color: #fff; background: #187fa3; border-radius: 6px; font-size: .5rem; font-weight: 700; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 19px; }.preview-metrics i { height: 56px; background: linear-gradient(135deg, #e5f3f7, #f6fbfc); border: 1px solid #d5e9ef; border-radius: 9px; }.preview-metrics i:nth-child(2) { background: linear-gradient(135deg, #e1eef6, #f6fafc); }.preview-metrics i:nth-child(3) { background: linear-gradient(135deg, #f8f0d7, #fffdf6); }
.preview-chart { display: flex; height: 105px; align-items: end; gap: 9px; margin-top: 14px; padding: 16px 14px 8px; background: #fff; border: 1px solid #e1ebef; border-radius: 9px; }.preview-chart span { flex: 1; height: 35%; background: #b9dfeb; border-radius: 4px 4px 0 0; }.preview-chart span:nth-child(2) { height: 57%; }.preview-chart span:nth-child(3) { height: 46%; }.preview-chart span:nth-child(4) { height: 80%; background: #3598bb; }.preview-chart span:nth-child(5) { height: 67%; }.preview-chart span:nth-child(6) { height: 91%; background: #092e52; }
.preview-table { display: grid; gap: 7px; margin-top: 12px; }.preview-table i { height: 11px; background: #e7f0f3; border-radius: 5px; }.preview-table i:nth-child(2) { width: 86%; }.preview-table i:nth-child(3) { width: 68%; }
.studio-badge { position: absolute; right: -23px; bottom: -25px; display: flex; align-items: center; gap: 10px; padding: 12px 15px; color: var(--ink); background: #fff; border: 1px solid #d5e8ee; border-radius: 13px; box-shadow: 0 15px 30px rgba(7,36,64,.15); }.studio-badge > svg { width: 25px; color: var(--blue-700); }.studio-badge strong, .studio-badge span { display: block; }.studio-badge strong { font-size: .7rem; }.studio-badge span { color: var(--muted); font-size: .57rem; }

.wl-intro { background: #fff; }.wl-intro-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 85px; }.wl-principles { display: grid; gap: 13px; }.wl-principles article { display: grid; grid-template-columns: 34px 49px 1fr; align-items: center; gap: 13px; padding: 20px; background: var(--soft); border: 1px solid var(--line); border-radius: 15px; }.wl-principles article > span { color: var(--blue-500); font-size: .65rem; font-weight: 800; }.wl-principles article > svg { width: 43px; height: 43px; padding: 10px; color: var(--blue-700); background: #e0f2f6; border-radius: 12px; }.wl-principles h3 { margin: 0 0 4px; font-size: 1rem; }.wl-principles p { margin: 0; font-size: .8rem; }

.wl-customization { color: #c8dae6; background: radial-gradient(circle at 10% 18%, rgba(53,152,187,.16), transparent 30%), var(--navy-950); }.wl-customization h2 { color: #fff; }.wl-custom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px; }.wl-custom-card { position: relative; min-height: 300px; padding: 28px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); }.wl-custom-card > span { position: absolute; top: 25px; right: 25px; color: #6d8ba0; font-size: .65rem; font-weight: 800; }.wl-custom-card > svg { width: 51px; height: 51px; margin-bottom: 42px; padding: 12px; color: var(--cyan-400); background: rgba(80,210,238,.08); border: 1px solid rgba(80,210,238,.13); border-radius: 15px; }.wl-custom-card h3 { color: #fff; font-size: 1.05rem; }.wl-custom-card p { color: #a8bdcc; font-size: .82rem; }.wl-custom-card small { color: var(--cyan-400); font-weight: 700; }

.wl-process { background: var(--soft); }.wl-process-grid { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 80px; }.wl-process-copy > p { font-size: 1.02rem; }.wl-process-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }.wl-process-copy li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .8rem; font-weight: 700; }.wl-process-copy li svg { width: 18px; color: var(--blue-500); }
.wl-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }.wl-steps li { display: grid; grid-template-columns: 38px 1fr 44px; align-items: center; gap: 15px; padding: 17px 19px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 20px rgba(7,36,64,.035); }.wl-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--blue-700); border-radius: 50%; font-size: .7rem; font-weight: 800; }.wl-steps small { color: var(--blue-500); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.wl-steps h3 { margin: 1px 0 3px; font-size: .92rem; }.wl-steps p { margin: 0; font-size: .74rem; }.wl-steps li > svg { width: 38px; height: 38px; padding: 9px; color: var(--blue-700); background: #e3f3f7; border-radius: 11px; }

.wl-benefits { background: #fff; }.wl-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px; }.wl-benefit-grid article { min-height: 245px; padding: 29px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-md); }.wl-benefit-grid article > svg { width: 48px; height: 48px; margin-bottom: 34px; padding: 11px; color: var(--blue-700); background: #dff1f5; border-radius: 14px; }.wl-benefit-grid h3 { font-size: 1.02rem; }.wl-benefit-grid p { margin: 0; font-size: .82rem; }

.wl-cta { padding: 78px 0; color: #c7d8e7; background: var(--navy-900); }.wl-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }.wl-cta h2 { max-width: 820px; margin-bottom: 14px; color: #fff; font-size: clamp(2.2rem, 3.8vw, 49px); }.wl-cta p { margin: 0; }.wl-cta-button { color: var(--navy-950); background: var(--gold-500); border-color: var(--gold-500); white-space: nowrap; }.wl-cta-button:hover { color: #fff; }

@media (max-width: 1050px) { .wl-hero-grid { grid-template-columns: 1fr; }.brand-studio { max-width: 850px; }.wl-custom-grid, .wl-benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .wl-intro-grid, .wl-process-grid, .wl-cta-inner { grid-template-columns: 1fr; gap: 48px; }.wl-cta-button { justify-self: start; } }
@media (max-width: 580px) { .wl-hero { padding-top: calc(var(--header-height) + 45px); padding-bottom: 70px; }.wl-hero h1 { font-size: 2.65rem; }.wl-hero-actions { display: grid; }.wl-hero-actions .button { width: 100%; }.wl-trust, .wl-custom-grid, .wl-benefit-grid { display: grid; grid-template-columns: 1fr; }.brand-studio { margin: 0 4px; }.studio-body { grid-template-columns: 1fr; }.studio-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }.control-brand { grid-column: 1 / -1; }.control-field, .control-ready { margin-top: 0; }.studio-preview { padding: 12px; }.preview-app { min-height: 300px; }.preview-content { padding: 15px; }.studio-badge { right: 10px; bottom: -35px; }.wl-intro { padding-top: 100px; }.wl-principles article { grid-template-columns: 28px 43px 1fr; padding: 16px; }.wl-custom-card, .wl-benefit-grid article { min-height: 0; }.wl-process-copy ul { grid-template-columns: 1fr; }.wl-steps li { grid-template-columns: 34px 1fr; }.wl-steps li > svg { display: none; }.wl-cta { padding: 65px 0; } }