/* Korpo Mail landing. Bir tema (auto), bir vurğu (Korpo mavisi), bir künc (12px).
 * Başlıqlar Outfit, mətn Open Sans (məhsulla eyni). Kənar asılılıq yoxdur. */

:root {
  --bg:#F7F8FA; --surface:#FFFFFF; --tint:#EEF4FB; --ink:#14161A; --ink-2:#2B2F36;
  --fg:#1B1E24; --fg2:#4B5361; --fg3:#737B89; --line:#E3E6EB;
  --brand:#0F6CBD; --brand-h:#115EA3; --brand-soft:#DCEBFA;
  --on-ink:#F7F8FA;
  --sh:0 1px 2px rgba(20,22,26,.05), 0 24px 48px -24px rgba(20,22,26,.25);
  --sh-sm:0 1px 2px rgba(20,22,26,.06);
  --r:12px;
  --head:"Outfit","Open Sans",system-ui,sans-serif;
  --body:"Open Sans","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#0F1115; --surface:#171A20; --tint:#152538; --ink:#F2F4F7; --ink-2:#D5D9E0;
    --fg:#EDEFF3; --fg2:#B4BAC6; --fg3:#7F8794; --line:#262A33;
    --brand:#4A9EF0; --brand-h:#6DB2F5; --brand-soft:#173A5C;
    --on-ink:#14161A;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 24px 48px -24px rgba(0,0,0,.7);
    --sh-sm:0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--bg); color:var(--fg); font:400 16px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4 { font-family:var(--head); font-weight:600; letter-spacing:-.02em; margin:0; color:var(--fg); }
h1 { font-size:clamp(38px, 5.2vw, 64px); line-height:1.04; letter-spacing:-.03em; font-weight:700; }
h2 { font-size:clamp(28px, 3.2vw, 40px); line-height:1.12; }
h3 { font-size:20px; line-height:1.3; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:min(1160px, 100% - 40px); margin:0 auto; }
@media (max-width:640px) { .wrap { width:min(1160px, 100% - 32px); } }

/* düymələr: tək künc sistemi, pill yox */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--r);
  font:600 15px/1 var(--body); white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), background-color .15s, border-color .15s, box-shadow .15s; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn.lg { height:52px; padding:0 24px; font-size:16px; }
.btn.ink { background:var(--ink); color:var(--on-ink); box-shadow:var(--sh-sm); }
.btn.ink:hover { background:var(--ink-2); }
.btn.ghost { background:var(--surface); color:var(--fg); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--fg3); background:var(--surface); }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r); }

/* brand */
.brand { display:inline-flex; align-items:center; font:700 22px/1 var(--head); letter-spacing:-.03em; color:var(--fg); }
.brand .o, .mail-brand .o { width:.78em; height:.78em; margin:0 .02em; animation:spin 9s linear infinite; transform-origin:50% 50%; }
.brand .o circle, .mail-brand .o circle { fill:none; stroke:var(--brand); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:34 16; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── nav ── */
.nav { position:sticky; top:0; z-index:20; height:68px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .2s; }
.nav.scrolled { border-bottom-color:var(--line); }
.nav-in { height:100%; display:flex; align-items:center; gap:32px; }
.links { display:flex; gap:26px; font-weight:600; font-size:15px; color:var(--fg2); }
.links a:hover { color:var(--fg); }
.nav-r { margin-left:auto; display:flex; gap:10px; align-items:center; }
.burger { display:none; width:44px; height:44px; border:0; background:none; border-radius:var(--r); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.burger span { width:20px; height:2px; background:var(--fg); border-radius:2px; transition:transform .2s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }

/* ── hero: mərkəz, hissəcik halqası, sonra mətn və domen inputu ── */
.hero { padding:32px 0 24px; overflow:hidden; position:relative; isolation:isolate; }
/* arxa fon: incə nöqtə toru (kənarlara doğru əriyir) və halqanın arxasında yumşaq mavi işıq */
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(var(--line) 1.1px, transparent 1.2px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(55% 60% at 50% 42%, #000 20%, transparent 78%); mask-image:radial-gradient(55% 60% at 50% 42%, #000 20%, transparent 78%); opacity:.9; }
.hero::after { content:""; position:absolute; left:50%; top:22%; width:min(760px, 90vw); height:min(760px, 90vw); transform:translate(-50%, -30%); z-index:-2; border-radius:50%;
  background:radial-gradient(circle, var(--brand-soft) 0%, transparent 62%); opacity:.7; pointer-events:none; }
@media (prefers-color-scheme:dark) { .hero::after { opacity:.45; } }
.hero-c { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:calc(100dvh - 68px); justify-content:center; padding-bottom:24px; }
/* kanvas bütün hero-nu tutur: hissəciklər ekranın hər yerindən gəlir; halqa .ring-space-in mərkəzində çəkilir */
.ring { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.ring-space { width:min(360px, 70vw); height:min(360px, 70vw); margin:0 auto 8px; position:relative; }
/* halqanın mərkəzində növbə ilə ikonlar: 3 s qalır, fade ilə dəyişir (JS .on verir) */
.ring-ico { position:absolute; inset:0; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; opacity:0; transform:scale(.9); transition:opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none; }
.hero.ready .ring-ico.on { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .ring-ico.on { opacity:1; transform:none; transition:none; } }
.ring-ico .ico { width:clamp(64px, 24%, 96px); height:auto; fill:none; stroke:var(--brand); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.ring-ico figcaption { font:600 15px var(--head); color:var(--fg2); letter-spacing:-.01em; }
.hero h1 { max-width:14ch; }
.hero .lead { margin-top:18px; font-size:18px; line-height:1.55; color:var(--fg2); max-width:56ch; }
.domain { display:flex; gap:8px; margin-top:28px; width:min(520px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:6px; box-shadow:var(--sh-sm); transition:border-color .15s, box-shadow .15s; }
.domain:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.domain input { flex:1; min-width:0; height:52px; border:0; background:none; padding:0 14px; font:500 17px var(--body); color:var(--fg); outline:none; }
.domain input::placeholder { color:var(--fg3); }
.domain .btn { flex-shrink:0; }
.domain-err { margin-top:10px; color:#C50F1F; font-size:14px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* halqa yığılana qədər mətn gizlidir; .ready gələndə pilləli görünür */
.hero-c > :not(.ring-space) { opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.hero.ready .hero-c > :not(.ring-space) { opacity:1; transform:none; }
.hero.ready .lead { transition-delay:.08s; } .hero.ready .domain { transition-delay:.16s; }
@media (prefers-reduced-motion:reduce) { .hero-c > :not(.ring-space) { opacity:1; transform:none; transition:none; } }

/* ── məhsul ── */
.product { padding:24px 0 56px; }
.product .sub { margin-top:12px; color:var(--fg2); max-width:60ch; }
.product-art { margin-top:32px; max-width:980px; }

/* məhsulun kiçildilmiş real görünüşü */
.mail { background:var(--surface); border-radius:var(--r); box-shadow:var(--sh); border:1px solid var(--line); overflow:hidden; font-size:12px; line-height:1.4; }
.mail-top { height:40px; display:flex; align-items:center; gap:12px; padding:0 14px; border-bottom:1px solid var(--line); }
.mail-brand { font:700 14px/1 var(--head); letter-spacing:-.03em; display:inline-flex; align-items:center; }
.mail-search { flex:1; max-width:220px; height:24px; border-radius:6px; background:var(--bg); color:var(--fg3); padding:0 10px; display:flex; align-items:center; margin:0 auto; }
.mail-av { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:8px; font-weight:700; flex-shrink:0; }
.mail-body { display:grid; grid-template-columns:1.05fr 1fr; min-height:340px; }
.mail-list { border-right:1px solid var(--line); min-width:0; }
.mail-read { min-width:0; }
.mail-row > div { min-width:0; }
.mail-tabs { display:flex; gap:12px; padding:10px 14px 6px; color:var(--fg3); font-weight:600; }
.mail-tabs b { color:var(--fg); position:relative; }
.mail-tabs b::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brand); border-radius:2px; }
.mail-row { display:grid; grid-template-columns:22px 1fr auto; gap:10px; padding:10px 14px; border-top:1px solid var(--line); align-items:start; }
.mail-row.on { background:var(--tint); }
.mail-row b, .mail-row i, .mail-row small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-row b { font-weight:600; }
.mail-row i { font-style:normal; color:var(--fg2); }
.mail-row.unread i { color:var(--brand); font-weight:600; }
.mail-row small { color:var(--fg3); font-size:11px; }
.mail-row time { color:var(--fg3); font-size:11px; }
.mail-read { padding:16px; }
.mail-read h4 { font-size:15px; margin-bottom:12px; }
.mail-read p { color:var(--fg2); margin-top:12px; font-size:12px; }
.mail-meet { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mm-h { padding:8px 12px; background:var(--bg); font-weight:600; border-bottom:1px solid var(--line); }
.mail-meet dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; padding:10px 12px; }
.mail-meet dt { color:var(--fg3); } .mail-meet dd { margin:0; }
.mm-b { display:flex; gap:6px; padding:0 12px 12px; }
.mm-b span { padding:5px 10px; border:1px solid var(--line); border-radius:6px; font-weight:600; }
.mm-b .yes { background:#EAF7EA; border-color:#9FD89F; color:#0E700E; }
@media (prefers-color-scheme:dark) { .mm-b .yes { background:#0F2A12; border-color:#1E5A24; color:#54B054; } }

/* ── uyğunluq ── */
.devices { padding:56px 0; }
.devices-in { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:40px; align-items:center; }
.devices p { margin-top:12px; color:var(--fg2); max-width:48ch; }
.logos { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.logos li { height:88px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:var(--fg); }
.logos img { width:34px; height:34px; opacity:.9; }
.wordmark { font:700 22px/1 var(--head); letter-spacing:-.03em; }

/* ── addımlar ── */
.how { padding:72px 0; }
.steps { list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; counter-reset:s; position:relative; }
.steps::before { content:""; position:absolute; left:0; right:0; top:11px; height:1px; background:var(--line); }
.steps li { counter-increment:s; position:relative; padding-top:36px; }
.steps li::before { content:""; position:absolute; left:0; top:6px; width:11px; height:11px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--bg); }
.steps h3 { font-size:22px; }
.steps p { margin-top:8px; color:var(--fg2); max-width:34ch; }

/* ── bento ── */
.feat { padding:24px 0 72px; }
.bento { display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-top:32px; }
.cell { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; grid-column:span 2; display:flex; flex-direction:column; gap:10px; }
.cell p { color:var(--fg2); font-size:15px; }
.cell.tint { grid-column:span 4; background:var(--tint); border-color:transparent; }
.cell.ink-cell { grid-column:span 2; background:var(--ink); color:var(--on-ink); border-color:transparent; }
.cell.ink-cell h3 { color:var(--on-ink); } .cell.ink-cell p { color:color-mix(in srgb, var(--on-ink) 70%, transparent); }
.dns { margin:auto 0 0; font:12px/1.7 var(--mono); background:color-mix(in srgb, var(--on-ink) 8%, transparent); border-radius:8px; padding:12px 14px; white-space:pre; overflow-x:auto; color:var(--on-ink); }
.cal { margin-top:auto; background:var(--surface); border-radius:8px; border:1px solid var(--line); overflow:hidden; font-size:11px; }
.cal-h { display:grid; grid-template-columns:repeat(5, 1fr); text-align:center; padding:6px 0; color:var(--fg3); border-bottom:1px solid var(--line); font-weight:600; }
.cal-h .today { color:var(--brand); }
.cal-g { display:grid; grid-template-columns:repeat(5, 1fr); grid-auto-rows:26px; gap:2px; padding:4px; background-image:linear-gradient(var(--line) 1px, transparent 1px); background-size:100% 28px; height:120px; }
.cal-g i { font-style:normal; background:var(--brand-soft); border-left:3px solid var(--brand); border-radius:4px; padding:3px 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--fg); font-weight:600; }
.cal-g i.me { background:var(--brand); color:#fff; border-color:var(--brand); }
.cal-g i.tent { background:repeating-linear-gradient(135deg, var(--brand-soft) 0 4px, var(--surface) 4px 8px); }

/* ── tariflər ── */
.pricing { padding:72px 0; }
.pricing .sub { margin-top:12px; color:var(--fg2); max-width:60ch; }
.plans { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:14px; margin-top:36px; }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; gap:16px; }
.plan.hot { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.plan-h { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.tag { font-size:12px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:5px 10px; border-radius:8px; }
.price { display:flex; align-items:baseline; gap:8px; }
.price b { font:700 40px/1 var(--head); letter-spacing:-.03em; }
.manat { font-family:system-ui, -apple-system, "Segoe UI", sans-serif; font-weight:600; font-size:.8em; } /* Outfit-də ₼ yoxdur */
.price span { color:var(--fg3); font-size:14px; }
.plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; color:var(--fg2); font-size:15px; flex:1; }
.plan ul li::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-right:10px; vertical-align:2px; }
.plan .btn { align-self:flex-start; }
.free { margin-top:18px; color:var(--fg2); }

/* ── köçürmə ── */
.migrate { padding:24px 0 72px; }
.migrate-in { background:var(--tint); border-radius:var(--r); padding:56px 48px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.migrate p { color:var(--fg2); max-width:60ch; font-size:17px; }
.migrate .btn { margin-top:8px; }

/* ── suallar ── */
.faq { padding:24px 0 72px; }
.faq-in { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:40px; }
.qa { display:flex; flex-direction:column; gap:10px; }
details { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 20px; }
summary { list-style:none; cursor:pointer; font-weight:600; padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font:400 22px/1 var(--head); color:var(--fg3); transition:transform .2s var(--ease); }
details[open] summary::after { transform:rotate(45deg); }
details p { color:var(--fg2); padding:0 0 18px; max-width:62ch; }

/* ── forma ── */
.start { padding:24px 0 96px; }
.start-in { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:48px; align-items:start; }
.start p { margin-top:12px; color:var(--fg2); max-width:44ch; }
.form { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; display:grid; grid-template-columns:1fr 1fr; gap:16px; box-shadow:var(--sh-sm); }
.form label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--fg2); }
.form label:nth-child(3), .form label:nth-child(4) { grid-column:span 1; }
.form label:nth-child(5), .form .btn, .form .note, .form .err { grid-column:1 / -1; }
.form input, .form select { height:46px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--fg); padding:0 14px; font:400 15px var(--body); }
.form input::placeholder { color:var(--fg3); }
.form input:focus, .form select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.form input.bad { border-color:#C50F1F; }
.err { color:#C50F1F; font-size:14px; }
.note { font-size:13px; color:var(--fg3); }
.form .btn { justify-self:start; }

/* ── footer ── */
.foot { border-top:1px solid var(--line); padding:40px 0 48px; }
.foot-in { display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:start; }
.foot p { margin-top:10px; color:var(--fg3); font-size:14px; }
.foot nav { display:flex; gap:20px; flex-wrap:wrap; font-weight:600; font-size:14px; color:var(--fg2); }
.foot-c { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--fg3); text-align:right; }
.foot-c a { color:var(--fg); }

/* ── giriş animasiyaları: yalnız transform/opacity ── */
.rv { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity:1; transform:none; }
@keyframes up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  .rv { opacity:1; transform:none; transition:none; }
  .brand .o, .mail-brand .o { animation:none; }
}

/* ── responsiv ── */
@media (max-width:1024px) {
  .bento { grid-template-columns:repeat(2, 1fr); }
  .cell, .cell.tint, .cell.ink-cell { grid-column:span 1; }
  .cell.tint { grid-column:span 2; }
  .plans { grid-template-columns:1fr; }
  .plan.hot { order:-1; }
}
@media (max-width:860px) {
  .links { display:none; position:absolute; left:0; right:0; top:68px; background:var(--surface); border-bottom:1px solid var(--line); padding:12px 20px 18px; flex-direction:column; gap:4px; }
  .links.open { display:flex; }
  .links a { padding:12px 8px; border-radius:var(--r); }
  .burger { display:flex; }
  .nav-r .ghost { display:none; }
  .hero-c { min-height:0; padding:8px 0 16px; }
  .domain { flex-direction:column; padding:8px; }
  .domain input { height:46px; }
  .domain .btn { width:100%; }
  .mail-body { grid-template-columns:1fr; }
  .mail-read { display:none; }
  .devices-in, .faq-in, .start-in { grid-template-columns:1fr; gap:24px; }
  .logos { grid-template-columns:repeat(2, 1fr); }
  .steps { grid-template-columns:1fr; gap:20px; }
  .steps::before { display:none; }
  .steps li { padding-top:0; padding-left:28px; }
  .steps li::before { top:9px; }
  .form { grid-template-columns:1fr; }
  .form label:nth-child(n) { grid-column:1 / -1; }
  .migrate-in { padding:36px 24px; }
  .foot-in { grid-template-columns:1fr; gap:20px; }
  .foot-c { text-align:left; }
  .how, .pricing, .feat, .faq, .migrate { padding-top:24px; padding-bottom:48px; }
}