@font-face {
font-family: "Readex Pro";
font-style: normal;
font-display: swap;
font-weight: 160 700;
src: url("../fonts/readex-pro-arabic-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: "Readex Pro";
font-style: normal;
font-display: swap;
font-weight: 160 700;
src: url("../fonts/readex-pro-latin-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--bg: #f7f7f8;
--surface: #ffffff;
--surface-2: #eeeeef;
--border: #dcdce0;
--border-strong: #a9a9af;
--text: #171719;
--text-dim: #5c5c63;
--accent: #6b3fd0;
--accent-strong: #5530b0;
--accent-2: #a8309a;
--accent-soft: #efe9ff;
--focus: #6b3fd0;
--night: #120d24;
--night-2: #1d1640;
--night-text: #f4f2fa;
--night-dim: #c2bbd9;
--night-accent: #c9b6ff;
--night-border: rgba(255, 255, 255, 0.16);
--sans: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
--step--1: 0.875rem;
--step-0: 1.0625rem;
--step-1: 1.25rem;
--step-2: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
--step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
--step-4: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--section: clamp(56px, 4rem + 4vw, 112px);
--gutter: clamp(16px, 4vw, 32px);
--measure: 66ch;
--radius: 4px;
--radius-lg: 10px;
--shadow: 0 1px 2px rgba(18, 13, 36, 0.06), 0 8px 24px -12px rgba(18, 13, 36, 0.18);
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-block-start: var(--space-5);
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 400 var(--step-0)/1.6 var(--sans);
font-synthesis: none;
text-rendering: optimizeLegibility;
}
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] [data-lang="en"], html:not([lang="ar"]) [data-lang="ar"] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; text-wrap: balance; }
html:not([lang="ar"]) :is(h1, h2) { letter-spacing: -0.015em; }
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.45; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }
::selection { background: var(--accent); color: #fff; }
.skip-link {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
z-index: 20;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius);
background: var(--text);
color: #fff;
font-weight: 600;
text-decoration: none;
transform: translateY(-160%);
}
.skip-link:focus { transform: none; color: #fff; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 18px; height: 18px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.btn {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-border: var(--border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
padding: 10px 20px;
border: 1px solid var(--btn-border);
border-radius: var(--radius);
background: var(--btn-bg);
color: var(--btn-fg);
font: 600 0.95rem/1.25 var(--sans);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn:hover { color: var(--btn-fg); }
.btn-primary { --btn-bg: var(--accent); --btn-fg: #fff; --btn-border: var(--accent); }
.btn-primary:hover { --btn-bg: var(--accent-strong); --btn-border: var(--accent-strong); }
.btn-secondary { --btn-bg: var(--surface); }
.btn-secondary:hover { --btn-border: var(--text); }
.btn-sm { min-height: 38px; padding: 7px 14px; font-size: 0.9rem; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
text-decoration: none;
}
.btn-link .icon { width: 18px; height: 18px; transition: transform 160ms var(--ease); }
.btn-link:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn-link:hover .icon { transform: scaleX(-1) translateX(3px); }
.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.site-header { background: var(--surface); border-block-end: 1px solid var(--border); }
.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-3);
min-height: 64px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
padding-block: var(--space-3);
color: var(--text);
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand-mark { width: 30px; height: 30px; color: var(--text); }
.site-nav { display: flex; gap: var(--space-1); order: 3; width: 100%; margin-inline: calc(var(--space-3) * -1); }
.site-nav a {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius);
color: var(--text-dim);
font-weight: 500;
text-decoration: none;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.lang-switch {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 var(--space-3);
border-radius: var(--radius);
color: var(--text);
font-weight: 500;
text-decoration: none;
}
.lang-switch:hover { background: var(--surface-2); color: var(--text); }
html:not([lang="ar"]) .lang-switch[lang="ar"] { font-family: "Segoe UI", Tahoma, system-ui, sans-serif; }
@media (min-width: 860px) {
.header-inner { column-gap: var(--space-6); }
.site-nav { order: 0; width: auto; margin-inline: 0; }
.header-actions { margin-inline-start: auto; }
}
@media (max-width: 859px) {
.header-inner { padding-block-end: var(--space-1); }
.site-nav { padding-block-end: var(--space-1); }
}
@media (max-width: 440px) {
.brand { font-size: 1rem; gap: 8px; }
.brand-mark { width: 26px; height: 26px; }
.header-actions { gap: 2px; }
.lang-switch { padding-inline: var(--space-2); }
.header-actions .btn-sm { padding-inline: 10px; font-size: 0.85rem; }
}
@media (max-width: 375px) {
.header-inner { column-gap: var(--space-2); }
.brand { font-size: 0.95rem; gap: 6px; }
.header-actions .btn-sm { padding-inline: 8px; }
}
.section { padding-block: var(--section); }
.section-surface { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { max-width: 760px; margin-block-end: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-3);
color: var(--accent);
font-size: var(--step--1);
font-weight: 600;
}
html:not([lang="ar"]) .eyebrow { letter-spacing: 0.06em; text-transform: uppercase; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { margin-block-start: var(--space-4); color: var(--text-dim); font-size: var(--step-1); line-height: 1.55; }
.section-foot { margin-block-start: var(--space-6); }
.hero {
position: relative;
overflow: hidden;
padding-block: clamp(48px, 3rem + 5vw, 120px);
background:
radial-gradient(60% 80% at 85% 10%, rgba(107, 63, 208, 0.45), transparent 70%),
radial-gradient(45% 60% at 10% 100%, rgba(168, 48, 154, 0.22), transparent 70%),
var(--night);
color: var(--night-text);
--focus: var(--night-accent);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='18' cy='26' r='1'/%3E%3Ccircle cx='96' cy='12' r='.7'/%3E%3Ccircle cx='170' cy='44' r='1.2'/%3E%3Ccircle cx='222' cy='18' r='.6'/%3E%3Ccircle cx='54' cy='88' r='.6'/%3E%3Ccircle cx='132' cy='104' r='.9'/%3E%3Ccircle cx='206' cy='126' r='.7'/%3E%3Ccircle cx='26' cy='160' r='.8'/%3E%3Ccircle cx='88' cy='190' r='1.1'/%3E%3Ccircle cx='160' cy='176' r='.6'/%3E%3Ccircle cx='228' cy='212' r='.9'/%3E%3Ccircle cx='120' cy='232' r='.6'/%3E%3C/g%3E%3C/svg%3E");
opacity: 0.55;
mask-image: linear-gradient(to bottom, #000, transparent 95%);
pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: var(--space-7); align-items: center; }
.hero .eyebrow { color: var(--night-accent); }
.hero h1 { font-size: var(--step-4); font-weight: 600; line-height: 1.1; max-width: 16ch; }
html[lang="ar"] .hero h1 { line-height: 1.35; max-width: 18ch; }
.hero-lead { margin-block-start: var(--space-5); max-width: 56ch; color: var(--night-dim); font-size: var(--step-1); line-height: 1.6; }
.hero .btn-group { margin-block-start: var(--space-6); }
.hero .btn-secondary { --btn-bg: transparent; --btn-fg: var(--night-text); --btn-border: rgba(255, 255, 255, 0.4); }
.hero .btn-secondary:hover { --btn-bg: rgba(255, 255, 255, 0.08); --btn-border: #fff; }
.hero-note { margin-block-start: var(--space-4); color: var(--night-dim); font-size: var(--step--1); }
@media (min-width: 960px) {
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); }
}
.window {
border: 1px solid var(--night-border);
border-radius: var(--radius-lg);
background: var(--surface);
color: var(--text);
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.04);
overflow: hidden;
font-size: 0.85rem;
line-height: 1.4;
}
.window-bar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px 14px;
background: var(--surface-2);
border-block-end: 1px solid var(--border);
}
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.window-url {
flex: 1;
padding: 3px 10px;
border-radius: 999px;
background: var(--surface);
color: var(--text-dim);
font-size: 0.78rem;
}
.window-body { padding: 16px; }
.window-search {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-dim);
}
.window-search .icon { width: 16px; height: 16px; }
.window-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: 14px; }
.tool-tile {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
}
.tool-tile .icon { width: 20px; height: 20px; color: var(--accent); margin-block-start: 1px; }
.tool-tile b { display: block; font-weight: 600; }
.tool-tile small { display: block; color: var(--text-dim); font-size: 0.75rem; }
.window-status {
display: flex;
align-items: center;
gap: 8px;
margin-block-start: 14px;
color: var(--text-dim);
font-size: 0.78rem;
}
.window-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16804a; box-shadow: 0 0 0 3px rgba(22, 128, 74, 0.15); }
@media (max-width: 520px) {
.tool-tile small { display: none; }
.window-grid .tool-tile:nth-child(n + 5) { display: none; }
}
.page-hero {
position: relative;
padding-block: clamp(40px, 2.5rem + 3vw, 88px) clamp(32px, 2rem + 2vw, 64px);
background:
radial-gradient(50% 120% at 100% 0%, var(--accent-soft), transparent 70%),
var(--surface);
border-block-end: 1px solid var(--border);
}
[dir="rtl"] .page-hero { background: radial-gradient(50% 120% at 0% 0%, var(--accent-soft), transparent 70%), var(--surface); }
.page-hero h1 { font-size: var(--step-4); max-width: 22ch; }
.page-hero .lead { margin-block-start: var(--space-4); max-width: 60ch; color: var(--text-dim); font-size: var(--step-1); line-height: 1.6; }
.page-hero .btn-group { margin-block-start: var(--space-6); }
.proof { display: grid; gap: var(--space-5); padding-block: var(--space-7); }
.proof-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.proof-item .icon { color: var(--accent); margin-block-start: 3px; }
.proof-item h2, .proof-item h3 { font-size: 1rem; font-weight: 600; }
.proof-item p { margin-block-start: var(--space-1); color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }
@media (min-width: 640px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
display: flex;
flex-direction: column;
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.section-surface .card { background: var(--bg); }
.card-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-block-end: var(--space-4);
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
}
.card h3 { font-size: 1.1rem; }
.card p { margin-block-start: var(--space-2); color: var(--text-dim); font-size: 0.97rem; line-height: 1.55; }
.tag {
display: inline-block;
align-self: flex-start;
margin-block-start: var(--space-3);
padding: 2px 10px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-strong);
font-size: 0.8rem;
font-weight: 600;
}
.reasons { display: grid; gap: var(--space-6); }
.reason { padding-block-start: var(--space-5); border-block-start: 2px solid var(--text); }
.reason h3 { font-size: var(--step-1); }
.reason p { margin-block-start: var(--space-3); color: var(--text-dim); line-height: 1.6; }
@media (min-width: 860px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); } }
.plans { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-6) var(--space-5) var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan-badge {
position: absolute;
inset-block-start: -12px;
inset-inline-start: var(--space-5);
padding: 2px 10px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
}
.plan h3 { font-size: var(--step-2); }
.plan-for { margin-block-start: var(--space-1); color: var(--text-dim); }
.plan-price { margin-block-start: var(--space-5); padding-block-end: var(--space-5); border-block-end: 1px solid var(--border); font-size: var(--step-1); font-weight: 600; }
.plan-price small { display: block; margin-block-start: 2px; color: var(--text-dim); font-size: 0.85rem; font-weight: 400; }
.plan .checks { margin-block: var(--space-5); flex: 1; align-content: start; }
.plan .btn { width: 100%; }
.checks { list-style: none; display: grid; gap: var(--space-3); }
.checks li { position: relative; padding-inline-start: 28px; line-height: 1.5; }
.checks li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 0.2em;
width: 18px;
height: 18px;
background: var(--accent);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.97rem; }
.compare th, .compare td { padding: var(--space-4) var(--space-5); text-align: start; vertical-align: top; border-block-end: 1px solid var(--border); }
.compare tbody tr:last-child > * { border-block-end: 0; }
.compare thead th { background: var(--surface-2); font-size: 1rem; font-weight: 600; }
.compare tbody th { width: 24%; color: var(--text-dim); font-weight: 500; }
.compare td + td, .compare th + td, .compare th + th { border-inline-start: 1px solid var(--border); }
.steps { list-style: none; display: grid; gap: var(--space-5); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 56px; }
.steps li::before {
content: counter(step);
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--accent);
border-radius: 50%;
color: var(--accent);
font-weight: 600;
}
html[lang="ar"] .steps li::before { content: counter(step, arabic-indic); }
.steps h3 { font-size: 1.05rem; padding-block-start: 7px; }
.steps p { margin-block-start: var(--space-1); color: var(--text-dim); line-height: 1.55; }
@media (min-width: 860px) {
.steps.row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps.row li { padding-inline-start: 0; padding-block-start: 56px; }
}
.faq { max-width: 820px; border-block-start: 1px solid var(--border); }
.faq details { border-block-end: 1px solid var(--border); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-5);
font-weight: 600;
font-size: 1.05rem;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
flex: none;
width: 14px;
height: 14px;
background: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 200ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-block-end: var(--space-5); max-width: var(--measure); color: var(--text-dim); line-height: 1.65; }
.modules { display: grid; gap: var(--space-4); }
.module {
display: grid;
gap: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.module .card-icon { margin: 0; }
.module h3 { font-size: 1.15rem; }
.module p { margin-block-start: var(--space-2); color: var(--text-dim); line-height: 1.55; }
.module .tag { margin-block-start: 0; margin-inline-start: var(--space-2); vertical-align: middle; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: var(--space-4); list-style: none; }
.chips li { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 0.84rem; color: var(--text); }
@media (min-width: 720px) { .module { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-5); } }
.ways { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.way { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.way h3 { font-size: var(--step-2); }
.way .plan-for { margin: 0; }
.way .checks { flex: 1; margin-block: var(--space-3); align-content: start; }
.way .btn { align-self: flex-start; }
.cta-band {
display: grid;
gap: var(--space-5);
align-items: center;
padding: clamp(28px, 4vw, 48px);
border-radius: var(--radius-lg);
background:
radial-gradient(70% 140% at 100% 0%, rgba(107, 63, 208, 0.5), transparent 70%),
var(--night);
color: var(--night-text);
--focus: var(--night-accent);
}
[dir="rtl"] .cta-band { background: radial-gradient(70% 140% at 0% 0%, rgba(107, 63, 208, 0.5), transparent 70%), var(--night); }
.cta-band h2 { font-size: var(--step-3); }
.cta-band p { margin-block-start: var(--space-3); max-width: 58ch; color: var(--night-dim); line-height: 1.6; }
.cta-band .btn-secondary { --btn-bg: transparent; --btn-fg: var(--night-text); --btn-border: rgba(255, 255, 255, 0.4); }
.cta-band .btn-secondary:hover { --btn-bg: rgba(255, 255, 255, 0.08); --btn-border: #fff; }
@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; } }
.facts { display: grid; margin: 0; border-block-start: 1px solid var(--border); }
.facts > div { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-block-end: 1px solid var(--border); }
.facts dt { color: var(--text-dim); font-size: 0.95rem; }
.facts dd { margin: 0; font-weight: 500; }
@media (min-width: 720px) { .facts > div { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); } }
.split { display: grid; gap: var(--space-7); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); } }
.story p + p { margin-block-start: var(--space-4); }
.story p { max-width: var(--measure); font-size: 1.08rem; line-height: 1.7; }
.legal { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .legal { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); } }
.legal-meta { color: var(--text-dim); font-size: 0.95rem; }
.legal-meta p + p { margin-block-start: var(--space-2); }
.clauses { max-width: 860px; }
.clauses section { padding-block: var(--space-5); border-block-end: 1px solid var(--border); }
.clauses section:first-child { padding-block-start: 0; }
.clauses h2 { font-size: 1.15rem; }
.clauses p { margin-block-start: var(--space-2); max-width: var(--measure); line-height: 1.7; }
.clauses .note { padding-block-start: var(--space-5); color: var(--text-dim); font-size: 0.95rem; }
.contact-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); } }
.form-card { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.request-form { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
.request-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.field-wide { grid-column: 1 / -1; }
}
.field { display: grid; gap: 6px; align-content: start; }
.field label, .field-label { font-size: 0.92rem; font-weight: 500; color: var(--text); }
.field .hint { color: var(--text-dim); font-weight: 400; }
input, select, textarea {
width: 100%;
min-height: 46px;
padding: 10px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
background: var(--surface);
color: var(--text);
font: 400 1rem/1.45 var(--sans);
transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--text-dim); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(107, 63, 208, 0.25); }
[aria-invalid="true"] { border-color: #c9362b; box-shadow: inset 0 0 0 1px #c9362b; }
textarea { resize: vertical; min-height: 9.5rem; }
select {
appearance: none;
padding-inline-end: 40px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171719' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
[dir="rtl"] select { background-position: left 14px center; }
#field-plan.stamped select { animation: plan-glow 1200ms var(--ease); }
@keyframes plan-glow { from { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(107, 63, 208, 0.25); } }
.trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check-box { min-height: 65px; }
.check-hint {
display: flex;
align-items: center;
min-height: 65px;
padding-inline: var(--space-4);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
color: var(--text-dim);
font-size: 0.9rem;
}
.check-box.drawn { animation: fade-in 260ms var(--ease); }
.field-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.form-status { min-height: 1.5em; font-size: 0.95rem; font-weight: 500; }
.form-status.shown { animation: fade-in 260ms var(--ease); }
.form-status.error { color: #b3261e; }
.form-note { color: var(--text-dim); font-size: 0.88rem; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }
.aside-block + .aside-block { margin-block-start: var(--space-6); padding-block-start: var(--space-6); border-block-start: 1px solid var(--border); }
.aside-block h2 { font-size: var(--step-1); margin-block-end: var(--space-4); }
.aside-block p { color: var(--text-dim); line-height: 1.6; }
.aside-block p + .btn-link, .aside-block p + p { margin-block-start: var(--space-3); }
.site-footer { margin-block-start: var(--section); padding-block: var(--space-7) var(--space-5); background: var(--surface); border-block-start: 1px solid var(--border); font-size: 0.95rem; }
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.footer-brand p { margin-block-start: var(--space-3); max-width: 40ch; color: var(--text-dim); line-height: 1.6; }
.footer-title { margin-block-end: var(--space-3); font-weight: 600; }
.footer-links { list-style: none; display: grid; gap: var(--space-2); }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-links a[aria-current="page"] { color: var(--text); font-weight: 500; }
.footer-links .icon { width: 14px; height: 14px; }
.footer-base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2) var(--space-5);
margin-block-start: var(--space-7);
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--border);
color: var(--text-dim);
font-size: 0.88rem;
}
main > :last-child.section { padding-block-end: 0; }
.notfound { padding-block: var(--section); }
.notfound h1 { font-size: var(--step-4); }
.notfound p { margin-block-start: var(--space-4); color: var(--text-dim); font-size: var(--step-1); }
.notfound .btn-group { margin-block-start: var(--space-6); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}