/*
  Premium Persian RTL website for Cloudy School (کلادی اسکول)
  Fonts: self-hosted Vazirmatn v33.003 (rastikerdar/vazirmatn, SIL OFL 1.1),
  subset to Arabic/Persian + Latin; weights 400 / 700 / 800 (600 -> 700, 900 -> 800).
*/
@font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --navy: #052850;
  --navy-2: #0a3a5c;
  --navy-3: #0d4a6e;
  --blue: #0a4a6e;
  --blue-2: #052850;
  --cyan: #00d4ff;
  --white: #F8FAFC;
  --gray: #E5E7EB;
  --muted: #5F7089;
  --green: #22C55E;
  --card: #FFFFFF;
  --soft-blue: #EEF7FF;
  --shadow: 0 28px 80px rgba(7, 17, 31, 0.14);
  --shadow-soft: 0 16px 45px rgba(7, 17, 31, 0.08);
  --shadow-blue: 0 18px 44px rgba(0, 212, 255, 0.22);
  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --font-heading: "Vazirmatn", Tahoma, sans-serif;
  --font-body: "Vazirmatn", Tahoma, sans-serif;
  --brand: #052850;
  --brand-2: #0a3a5c;
  --accent: #00b8e0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  direction: rtl;
  text-align: right;
  line-height: 1.9;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
::selection { background: rgba(32, 199, 245, 0.28); color: var(--navy); }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section-pad { padding: 72px 0; }
.section-pad-small { padding: 56px 0; }
.skip-link {
  position: fixed; top: 12px; right: 12px; z-index: 9999;
  background: var(--navy); color: #fff; padding: 8px 14px;
  border-radius: 999px; transform: translateY(-150%); transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(248, 250, 252, .84);
  border-bottom: 1px solid rgba(7, 17, 31, .08);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 14px 42px rgba(7,17,31,.1); background: rgba(248,250,252,.96); }
.nav-shell { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.04em; }
.brand-mark {
  flex: 0 0 auto; width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 18px; overflow: hidden;
  background: transparent;
  box-shadow: 0 16px 34px rgba(31,74,92,.22);
}
.brand-mark svg, .brand-mark img { width: 50px; height: 50px; display: block; fill: initial; stroke: none; }
.brand-copy { display: grid; gap: 0; line-height: 1.35; }
.brand-copy strong { font-size: 1.08rem; }
.brand-copy small { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: 0; }
.main-nav { display: flex; align-items: center; gap: 2px; color: #26364A; font-weight: 800; font-size: .9rem; }
.main-nav a { padding: 10px 11px; border-radius: 999px; transition: color .2s ease, background .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.is-active { color: var(--blue); background: rgba(0,212,255,.10); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 900; letter-spacing: -.02em; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: var(--shadow-blue); }
.btn-secondary { color: var(--navy); background: rgba(255,255,255,.78); border-color: rgba(0,212,255,.20); box-shadow: 0 12px 30px rgba(7,17,31,.08); }
.btn-header { background: var(--navy); color: #fff; min-height: 44px; padding-inline: 18px; box-shadow: 0 14px 30px rgba(7,17,31,.18); }
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 16px 36px rgba(0,0,0,.13); }
.menu-toggle { display: none; width: 48px; height: 48px; border: 0; background: rgba(7,17,31,.06); border-radius: 16px; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--navy); border-radius: 99px; transition: transform .25s ease, opacity .25s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero { position: relative; min-height: auto; padding: 48px 0 56px; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 82% 22%, rgba(32,199,245,.22), transparent 30%),
  radial-gradient(circle at 13% 18%, rgba(30,136,229,.15), transparent 28%),
  linear-gradient(180deg, #F8FAFC 0%, #F2F7FC 100%); }
.hero-bg::before { content:""; position:absolute; inset: 90px 0 auto; height: 480px; background-image: linear-gradient(rgba(7,17,31,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(7,17,31,.045) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, #000 0 45%, transparent 72%); opacity: .9; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr .98fr; gap: 52px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid rgba(0,212,255,.20); background: rgba(255,255,255,.7); border-radius: 999px; color: var(--blue-2); font-weight: 900; font-size: .9rem; box-shadow: 0 12px 30px rgba(7,17,31,.05); }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(34,197,94,.15); }
h1, h2, h3 { font-family: var(--font-heading); margin: 0; letter-spacing: -.055em; line-height: 1.35; }
h1 { max-width: 760px; font-size: clamp(2.4rem, 5.4vw, 5.2rem); margin-top: 22px; color: var(--navy); }
.hero-subtitle { max-width: 660px; margin: 22px 0 0; color: #42536A; font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: 0 10px 26px rgba(7,17,31,.06); color: #304259; font-weight: 800; font-size: .88rem; }
.hero-trust span::before { content:""; width: 8px; height: 8px; border-radius: 99px; background: var(--cyan); }

.hero-visual { position: relative; min-width: 0; }
.dashboard-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.95); border-radius: var(--radius-xl); background: rgba(255,255,255,.84); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.dashboard-card::before { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(0,212,255,.10), transparent 45%, rgba(32,199,245,.13)); pointer-events:none; }
.dashboard-topbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(7,17,31,.08); }
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 11px; height: 11px; border-radius: 50%; background: #CBD5E1; }
.window-dots i:nth-child(1) { background: var(--green); }
.window-dots i:nth-child(2) { background: var(--cyan); }
.search-pill { width: 190px; max-width: 55%; padding: 7px 14px; border-radius: 999px; background: #F1F5F9; color: #64748B; font-weight: 800; font-size: .82rem; text-align: center; }
.dashboard-body { position: relative; display: grid; grid-template-columns: 82px 1fr; min-height: 482px; }
.mock-sidebar { padding: 20px 14px; background: linear-gradient(180deg, rgba(7,17,31,.96), #10233A); display: flex; flex-direction: column; align-items: center; gap: 15px; }
.mini-logo { width: 36px; height: 36px; border-radius: 13px; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.side-line { width: 42px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.22); }
.side-line.short { width: 29px; }
.side-line.active { background: #fff; }
.mock-content { padding: 22px; display: grid; gap: 18px; align-content: start; }
.mock-header-row, .mock-stats article, .exam-panel, .teacher-tile, .mock-bottom-row span { background: #fff; border: 1px solid rgba(7,17,31,.07); box-shadow: 0 12px 28px rgba(7,17,31,.06); }
.mock-header-row { display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 16px; border-radius: 22px; }
.mock-header-row strong { display:block; font-size: 1rem; }
.mock-header-row small { color: var(--muted); font-weight: 700; }
.status-chip { padding: 6px 11px; border-radius: 999px; background: rgba(34,197,94,.1); color: #15803D; font-weight: 900; font-size: .78rem; }
.mock-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mock-stats article { min-height: 116px; padding: 14px; border-radius: 22px; }
.stat-icon { width: 36px; height: 36px; display:block; border-radius: 14px; margin-bottom: 10px; background: linear-gradient(135deg, rgba(30,136,229,.15), rgba(32,199,245,.26)); position: relative; }
.stat-icon::after { content:""; position:absolute; inset: 10px; border-radius: 6px; border: 2px solid var(--blue); }
.mock-stats strong { display:block; font-size: .88rem; }
.mock-stats small { color: var(--muted); font-weight: 700; font-size: .75rem; }
.mock-main-panel { display: grid; grid-template-columns: 1.3fr .75fr; gap: 12px; }
.online-class-box { min-height: 170px; display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.teacher-tile { border-radius: 24px; padding: 16px; display: grid; align-content: center; justify-items: center; text-align: center; }
.person-illustration { position: relative; width: 88px; height: 72px; margin-bottom: 7px; }
.person-illustration .head { position: absolute; top: 4px; left: 33px; width: 24px; height: 24px; border-radius: 50%; background: #F0B79F; }
.person-illustration .body { position: absolute; top: 30px; left: 25px; width: 42px; height: 35px; border-radius: 18px 18px 8px 8px; background: var(--blue); }
.person-illustration .laptop { position: absolute; bottom: 0; left: 13px; width: 66px; height: 24px; border-radius: 7px; background: var(--navy); }
.teacher-tile b { font-size:.86rem; }
.teacher-tile small { color: var(--muted); font-weight:700; font-size:.73rem; }
.student-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.student-grid i { border-radius: 16px; background: linear-gradient(135deg,#E0F2FE,#F8FAFC); border: 1px solid rgba(30,136,229,.12); }
.exam-panel { border-radius: 24px; padding: 18px; align-content: center; display:grid; gap: 14px; }
.exam-title { color: var(--navy); font-weight: 900; }
.progress { height: 10px; border-radius: 999px; background: #E2E8F0; overflow: hidden; direction: ltr; }
.progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.exam-meta { display:flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-weight:800; }
.exam-meta b { color: var(--blue); font-size: 1.6rem; }
.mock-bottom-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mock-bottom-row span { padding: 8px 12px; border-radius: 999px; color: #334155; font-weight: 800; font-size: .78rem; }
.floating-note { position: absolute; z-index: 5; padding: 11px 15px; border-radius: 16px; background: var(--navy); color: #fff; font-weight: 900; box-shadow: 0 20px 45px rgba(7,17,31,.22); animation: float 4.2s ease-in-out infinite; }
.note-one { top: 14%; right: -12px; }
.note-two { bottom: 13%; left: -8px; animation-delay: 1.2s; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
@keyframes float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

.section-heading { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.section-heading.align-start { margin-inline: 0; text-align: right; }
.section-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 900; margin-bottom: 10px; }
.section-kicker::before { content:""; width: 22px; height: 3px; border-radius: 999px; background: var(--cyan); }
.section-kicker.light { color: #fff; }
.section-kicker.light::before { background: rgba(255,255,255,.75); }
.section-heading h2, .mini-heading h2 { font-size: clamp(1.8rem, 3vw, 3rem); color: var(--navy); }
.section-heading p, .mini-heading p { margin: 14px 0 0; color: var(--muted); font-weight: 600; }

.solution { background: #fff; position: relative; }
.solution::before { content:""; position:absolute; inset: auto 0 0; height: 280px; background: linear-gradient(180deg, transparent, #F1F7FD); pointer-events:none; }
.solution-grid { position: relative; display:grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
.solution-panel { display:grid; gap: 14px; }
.solution-item { position: relative; padding: 18px 20px 18px 76px; min-height: 86px; border: 1px solid rgba(7,17,31,.08); background: rgba(255,255,255,.88); border-radius: 24px; box-shadow: var(--shadow-soft); overflow:hidden; }
.solution-item::before { content:""; position:absolute; right: 20px; top: 24px; width: 38px; height: 38px; border-radius: 14px; background: linear-gradient(135deg, rgba(30,136,229,.14), rgba(32,199,245,.28)); }
.solution-item::after { content:""; position:absolute; right: 32px; top: 36px; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--blue); }
.solution-item.active { background: linear-gradient(135deg, rgba(7,17,31,.98), rgba(16,35,58,.98)); color: #fff; border-color: rgba(255,255,255,.12); }
.solution-item.active span { color: #CBD5E1; }
.solution-item b { display:block; font-size: 1.04rem; margin-bottom: 3px; }
.solution-item span { color: var(--muted); font-weight: 700; }

.mini-heading { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.audience { background: linear-gradient(180deg, #F1F7FD, #F8FAFC); }
.audience-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.audience-card { background: #fff; border:1px solid rgba(7,17,31,.08); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-soft); }
.audience-card span { display:inline-flex; width: 42px; height: 42px; align-items:center; justify-content:center; border-radius: 15px; background: var(--soft-blue); color: var(--blue); font-weight: 900; margin-bottom: 16px; }
.audience-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.audience-card p { margin:0; color: var(--muted); font-weight: 600; }

.advantages { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.advantages::before { content:""; position:absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(32,199,245,.13); top: -200px; right: -120px; filter: blur(2px); }
.advantages-grid { position: relative; display:grid; grid-template-columns: .88fr 1.12fr; gap: 42px; align-items:center; }
.advantages .section-heading h2 { color: #fff; }
.advantages .section-heading p { color: #CBD5E1; }
.advantages-list { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.advantage-item { display:flex; align-items:flex-start; gap: 12px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #F8FAFC; font-weight: 800; backdrop-filter: blur(12px); }
.advantage-item span { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(34,197,94,.18); position:relative; margin-top: 6px; }
.advantage-item span::after { content:""; position:absolute; width: 9px; height: 5px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); right: 6px; top: 6px; }

.process { background: #fff; }
.process-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.process-step { position:relative; padding: 24px; min-height: 230px; border: 1px solid rgba(7,17,31,.08); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-soft); overflow:hidden; }
.process-step::after { content:""; position:absolute; inset:auto -30px -70px auto; width: 150px; height: 150px; border-radius: 50%; background: rgba(32,199,245,.1); }
.step-number { display:inline-flex; width: 46px; height: 46px; align-items:center; justify-content:center; border-radius: 17px; color:#fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-weight: 900; margin-bottom: 20px; box-shadow: var(--shadow-blue); }
.process-step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.process-step p { margin:0; color: var(--muted); font-weight: 600; }

.appointment { padding: 0 0 100px; background: #fff; }
.appointment-card { overflow:hidden; display:grid; grid-template-columns: .92fr 1.08fr; align-items:center; gap: 24px; min-height: 360px; padding: 36px; border-radius: 42px; background: radial-gradient(circle at 18% 50%, rgba(32,199,245,.22), transparent 34%), linear-gradient(135deg, #07111F, #10233A); color: #fff; box-shadow: var(--shadow); }
.appointment-content h2 { color:#fff; font-size: clamp(1.8rem, 3vw, 3rem); }
.appointment-content p { color:#D8E6F6; margin: 14px 0 26px; font-weight: 600; }
.appointment-illustration { position: relative; min-height: 260px; }
.calendar-ui { position:absolute; inset: 24px 24px auto auto; width: 250px; padding: 18px; border-radius: 28px; background:#fff; box-shadow: 0 28px 65px rgba(0,0,0,.22); }
.cal-header { height: 28px; border-radius: 13px; background: linear-gradient(135deg, var(--blue), var(--cyan)); margin-bottom: 14px; }
.cal-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.cal-grid i { height: 34px; border-radius: 12px; background:#E0F2FE; }
.cal-grid i:nth-child(5) { background: rgba(34,197,94,.2); border:1px solid rgba(34,197,94,.4); }
.cal-line { height: 10px; border-radius: 999px; background:#E2E8F0; margin-top: 10px; }
.cal-line.short { width: 62%; }
.parent-card { position:absolute; left: 30px; bottom: 24px; width: 190px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(16px); }
.parent-card span { display:block; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient(135deg, var(--green), var(--cyan)); margin-bottom: 10px; }
.parent-card b, .parent-card small { display:block; }
.parent-card small { color:#BFD0E4; font-weight:700; }

.contact { background: linear-gradient(180deg, #F8FAFC, #EEF7FF); }
.contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items:center; }
.contact-phone { margin-top: 24px; }
.contact-card { background:#fff; border:1px solid rgba(7,17,31,.08); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow); display:grid; gap: 16px; }
.contact-row { display:flex; align-items:center; gap: 14px; padding: 16px; border-radius: 22px; background:#F8FAFC; border: 1px solid rgba(7,17,31,.06); }
.contact-row small { display:block; color: var(--muted); font-weight: 800; margin-bottom: 2px; }
.contact-row strong, .contact-row a { font-weight: 900; color: var(--navy); }
.contact-icon { width: 46px; height: 46px; border-radius: 17px; background: linear-gradient(135deg, rgba(30,136,229,.15), rgba(32,199,245,.28)); position:relative; flex: 0 0 auto; }
.contact-icon::after { content:""; position:absolute; inset: 13px; border-radius: 6px; border:2px solid var(--blue); }
.contact-icon.phone::after { border-radius: 99px; }
.contact-icon.location::after { width: 12px; height: 12px; inset: 13px auto auto 15px; border-radius:50% 50% 50% 0; transform: rotate(-45deg); }

.site-footer { background: var(--navy); color:#fff; padding: 34px 0 96px; }
.footer-grid { display:flex; align-items:flex-start; justify-content:space-between; gap: 24px; }
.footer-brand { font-size: 1.2rem; }
.site-footer p { max-width: 560px; color:#C9D6E6; margin: 10px 0 0; font-weight: 600; }
.footer-links { display:flex; flex-wrap:wrap; gap: 10px; }
.footer-links a { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color:#E2E8F0; font-weight: 800; }
.mobile-contact-bar { position: fixed; z-index: 1100; right: 14px; left: 14px; bottom: 14px; display:none; }
.mobile-contact-bar a { display:flex; justify-content:center; align-items:center; min-height: 52px; border-radius: 18px; color:#fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 18px 44px rgba(30,136,229,.34); font-weight: 900; }

.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: .01; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
}
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }

@media (max-width: 1040px) {
  .hero-grid, .solution-grid, .advantages-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-visual { max-width: 760px; width: 100%; margin-inline: auto; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .appointment-card { grid-template-columns: 1fr; }
  .appointment-illustration { order: 2; }
}
@media (max-width: 850px) {
  .btn-header { display:none; }
  .menu-toggle { display:block; }
  .main-nav { position: fixed; inset: 84px 16px auto; display:grid; gap: 8px; padding: 14px; border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); border:1px solid rgba(7,17,31,.08); transform: translateY(-16px); opacity:0; visibility:hidden; pointer-events:none; transition: .22s ease; }
  .main-nav.is-open { transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .main-nav a { padding: 12px 14px; }
  .hero-grid { gap: 34px; }
  .dashboard-body { grid-template-columns: 64px 1fr; }
  .mock-stats, .mock-main-panel, .audience-grid, .advantages-list { grid-template-columns: 1fr; }
  .online-class-box { grid-template-columns: 1fr; }
  .student-grid { grid-template-columns: repeat(3,1fr); min-height: 96px; }
  .mobile-contact-bar { display:block; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 28px, 1180px); }
  .section-pad { padding: 52px 0; }
  .section-pad-small { padding: 40px 0; }
  .nav-shell { min-height: 76px; }
  .brand-mark { width: 46px; height: 46px; border-radius: 16px; }
  .brand-copy strong { font-size: .98rem; }
  .brand-copy small { font-size: .72rem; }
  .hero { padding-top: 42px; }
  .hero-actions .btn { width: 100%; }
  .dashboard-card { border-radius: 26px; }
  .dashboard-body { grid-template-columns: 1fr; }
  .mock-sidebar { display:none; }
  .mock-content { padding: 14px; }
  .mock-header-row { align-items:flex-start; }
  .floating-note { display:none; }
  .solution-item { padding-left: 18px; }
  .process-grid { grid-template-columns: 1fr; }
  .appointment { padding-bottom: 70px; }
  .appointment-card { padding: 24px; border-radius: 30px; }
  .appointment-illustration { min-height: 230px; }
  .calendar-ui { width: 210px; right: 0; }
  .parent-card { left: 0; }
  .contact-card { padding: 18px; border-radius: 28px; }
  .footer-grid { display:grid; }
}


/* SEO service pages and internal-link enhancements */
.solution-link { display: block; transition: transform .2s ease, box-shadow .2s ease; }
.solution-link:hover { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(7,17,31,.13); }
.solution-link em { display: inline-block; margin-top: 8px; color: var(--blue); font-style: normal; font-size: .82rem; font-weight: 900; }
.solution-item.active em { color: var(--cyan); }
.compact-process .process-step { min-height: 205px; }

.inner-hero { position: relative; overflow: hidden; padding: 74px 0 92px; background: linear-gradient(180deg,#F8FAFC,#EEF7FF); }
.inner-hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(7,17,31,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(7,17,31,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,#000,transparent 86%); }
.inner-orb { position:absolute; width:560px; height:560px; border-radius:50%; left:-180px; top:-230px; background:rgba(32,199,245,.16); filter:blur(2px); }
.exam-theme .inner-orb { background:rgba(30,136,229,.15); left:auto; right:-220px; }
.inner-hero-grid { position:relative; display:grid; grid-template-columns: 1fr .96fr; gap:48px; align-items:center; }
.inner-copy h1 { font-size:clamp(2.35rem,5vw,4.7rem); margin:12px 0 20px; max-width:760px; }
.inner-copy > p { color:#42536A; font-size:clamp(1rem,1.4vw,1.16rem); font-weight:600; max-width:730px; }
.breadcrumb { display:flex; align-items:center; gap:9px; margin-bottom:22px; color:var(--muted); font-size:.84rem; font-weight:800; }
.breadcrumb a:hover { color:var(--blue); }
.breadcrumb strong { color:var(--navy); }
.service-mock { position:relative; overflow:hidden; min-height:430px; padding:20px; border-radius:36px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.94); box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.mock-browser { display:flex; align-items:center; gap:7px; min-height:46px; padding:0 14px; border-radius:17px; background:#F1F5F9; color:var(--muted); }
.mock-browser span { width:10px; height:10px; border-radius:50%; background:#CBD5E1; }
.mock-browser span:first-child { background:var(--green); }
.mock-browser span:nth-child(2) { background:var(--cyan); }
.mock-browser b { margin-right:auto; color:var(--navy); font-size:.84rem; }
.live-layout { display:grid; grid-template-columns:1.3fr .68fr; gap:13px; margin-top:15px; min-height:330px; }
.live-main,.live-students,.question-box,.exam-ui aside { border:1px solid rgba(7,17,31,.07); background:#fff; border-radius:24px; box-shadow:0 12px 30px rgba(7,17,31,.06); }
.live-main { padding:18px; display:grid; align-content:space-between; gap:20px; }
.board-title { font-weight:900; }
.board-chart { height:145px; display:flex; align-items:end; gap:12px; padding:18px; border-radius:19px; background:linear-gradient(135deg,#EEF7FF,#F8FAFC); }
.board-chart i { flex:1; min-height:30px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg,var(--cyan),var(--blue)); }
.board-chart i:nth-child(1){height:42%}.board-chart i:nth-child(2){height:76%}.board-chart i:nth-child(3){height:58%}.board-chart i:nth-child(4){height:91%}
.teacher-strip { display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px; background:#F8FAFC; }
.teacher-strip span { width:44px; height:44px; border-radius:15px; background:linear-gradient(135deg,#F0B79F 0 35%,var(--blue) 36%); }
.teacher-strip b,.teacher-strip small { display:block; }.teacher-strip small{color:var(--muted);font-size:.73rem;font-weight:700}
.live-students { padding:17px; display:grid; align-content:start; gap:16px; }
.avatar-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.avatar-grid i { aspect-ratio:1; border-radius:16px; background:linear-gradient(135deg,#E0F2FE,#F8FAFC); border:1px solid rgba(30,136,229,.12); }
.attendance-pill { padding:9px 10px; border-radius:13px; background:rgba(34,197,94,.1); color:#15803D; font-size:.75rem; font-weight:900; text-align:center; }
.exam-ui { display:grid; grid-template-columns:90px 1fr; gap:13px; min-height:330px; margin-top:15px; }
.exam-ui aside { padding:16px 12px; display:grid; align-content:start; gap:9px; text-align:center; }
.exam-ui aside i { display:grid; place-items:center; height:36px; border-radius:12px; background:#F1F5F9; color:var(--muted); font-style:normal; font-weight:900; }
.exam-ui aside i.done { background:rgba(34,197,94,.12); color:#15803D; }.exam-ui aside i.current{background:var(--blue);color:#fff}
.question-box { padding:22px; }
.question-top { display:flex; justify-content:space-between; color:var(--muted); font-weight:800; font-size:.8rem; }
.question-top b { color:var(--blue); }.question-box h3{font-size:1.08rem;margin:25px 0 16px}
.question-box label { display:flex; align-items:center; gap:10px; padding:12px 14px; margin-top:9px; border-radius:15px; border:1px solid rgba(7,17,31,.08); color:#405168; font-weight:750; }
.question-box label i { width:17px; height:17px; border:2px solid #CBD5E1; border-radius:50%; }.question-box label.selected{border-color:rgba(30,136,229,.4);background:#EEF7FF;color:var(--navy)}.question-box label.selected i{border:5px solid var(--blue)}
.question-progress { height:8px; margin-top:25px; border-radius:99px; background:#E2E8F0; overflow:hidden; direction:ltr; }.question-progress span{display:block;width:38%;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:inherit}
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { min-height:240px; padding:24px; border-radius:28px; border:1px solid rgba(7,17,31,.08); background:#fff; box-shadow:var(--shadow-soft); }
.feature-no { display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; border-radius:16px; background:var(--soft-blue); color:var(--blue); font-weight:900; margin-bottom:20px; }
.feature-card h3 { font-size:1.18rem; margin-bottom:9px; }.feature-card p{margin:0;color:var(--muted);font-weight:600}
.content-band { position:relative; overflow:hidden; padding:88px 0; background:var(--navy); color:#fff; }
.content-band::after { content:""; position:absolute; width:520px; height:520px; border-radius:50%; left:-180px; bottom:-300px; background:rgba(32,199,245,.13); }
.content-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .75fr; gap:55px; align-items:center; }
.content-copy h2 { color:#fff; font-size:clamp(1.8rem,3vw,3rem); }.content-copy p{color:#D4E0EE;font-weight:600}.content-copy strong{color:#fff}
.check-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.check-list li { position:relative; padding:16px 52px 16px 18px; border-radius:19px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-weight:800; }
.check-list li::before { content:"✓"; position:absolute; right:17px; top:14px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:rgba(34,197,94,.16); color:var(--green); }
.soft-section { background:linear-gradient(180deg,#F8FAFC,#EEF7FF); }
.split-info { display:grid; grid-template-columns:.8fr 1.2fr; gap:38px; align-items:start; }
.usecase-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.usecase-grid div { min-height:125px; padding:20px; border-radius:24px; background:#fff; border:1px solid rgba(7,17,31,.08); box-shadow:var(--shadow-soft); }
.usecase-grid b,.usecase-grid span { display:block; }.usecase-grid b{margin-bottom:6px}.usecase-grid span{color:var(--muted);font-weight:650}
.faq-section { background:#fff; }.faq-wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:42px;align-items:start}.faq-list{display:grid;gap:12px}
.faq-list details { border:1px solid rgba(7,17,31,.08); border-radius:22px; background:#F8FAFC; overflow:hidden; }
.faq-list summary { position:relative; cursor:pointer; list-style:none; padding:18px 20px 18px 55px; color:var(--navy); font-weight:900; }.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after { content:"+"; position:absolute; left:18px; top:14px; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:#E0F2FE; color:var(--blue); font-size:1.25rem; transition:transform .2s ease; }.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p { margin:0; padding:0 20px 20px; color:var(--muted); font-weight:600; }
.related-section { padding:0 0 92px; }.related-card{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:34px;border-radius:34px;background:linear-gradient(135deg,var(--blue),#1264BA);color:#fff;box-shadow:var(--shadow-blue)}.related-card span{color:#D7F5FF;font-weight:900}.related-card h2{color:#fff;font-size:clamp(1.55rem,2.7vw,2.5rem);margin:7px 0}.related-card p{margin:0;color:#E4F1FF;font-weight:600}
@media (max-width:1040px){.inner-hero-grid,.content-grid,.split-info,.faq-wrap{grid-template-columns:1fr}.service-mock{max-width:760px;width:100%;margin-inline:auto}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.inner-hero{padding:48px 0 70px}.inner-copy h1{font-size:clamp(2.15rem,10vw,3.3rem)}.feature-grid,.usecase-grid{grid-template-columns:1fr}.service-mock{min-height:auto;padding:13px;border-radius:26px}.live-layout{grid-template-columns:1fr}.live-students{display:none}.exam-ui{grid-template-columns:1fr}.exam-ui aside{display:flex;overflow:auto}.exam-ui aside strong{display:none}.exam-ui aside i{flex:0 0 36px}.related-card{display:grid;padding:25px}.related-card .btn{width:100%}}


/* ===== Blog ===== */
.blog-hero { background: linear-gradient(180deg,#F8FAFC,#EEF7FF); }
.blog-hero-copy { max-width: 820px; }
.blog-hero-copy h1 { margin: 12px 0 0; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom: 18px; color:#5B6B7F; font-weight:700; font-size:.92rem; }
.breadcrumbs a { color:#1E88E5; }
.blog-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top: 14px; color:#5B6B7F; font-weight:700; font-size:.92rem; }
.blog-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.blog-card { display:flex; flex-direction:column; gap:10px; padding: 22px; border-radius: 22px; background:#fff; box-shadow: 0 14px 40px rgba(7,17,31,.06); border:1px solid rgba(0,212,255,.10); color:inherit; transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(7,17,31,.1); }
.blog-card-kicker { display:inline-flex; width:max-content; padding:6px 10px; border-radius:999px; background:#EAF5FF; color:#0B63B7; font-weight:800; font-size:.82rem; }
.blog-card h2, .blog-card h3 { margin:0; font-size:1.15rem; letter-spacing:-.03em; }
.blog-card p { margin:0; color:#4A5B70; font-weight:600; line-height:1.8; }
.blog-layout { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; align-items:start; }
.blog-article { background:#fff; border-radius: 28px; padding: 28px 28px 34px; box-shadow: 0 14px 40px rgba(7,17,31,.06); border:1px solid rgba(0,212,255,.10); line-height:1.95; color:#243447; font-weight:600; }
.blog-article h2 { margin: 1.6em 0 .6em; font-size:1.35rem; letter-spacing:-.03em; color:#07111F; }
.blog-article h3 { margin: 1.2em 0 .45em; }
.blog-article p, .blog-article li { font-size:1.02rem; }
.blog-article ul, .blog-article ol { padding-inline-start: 1.2em; }
.blog-article a { color:#1E88E5; font-weight:800; }
.blog-cta { margin-top: 34px; padding: 22px; border-radius: 22px; background: linear-gradient(135deg,#07111F,#12324A); color:#fff; }
.blog-cta h2 { color:#fff; margin-top:0; }
.blog-cta p { color:#D7E4F2; }
.blog-aside { display:grid; gap:14px; position: sticky; top: 100px; }
.blog-aside-card { padding:18px; border-radius:20px; background:#fff; box-shadow: 0 12px 30px rgba(7,17,31,.06); border:1px solid rgba(0,212,255,.10); display:grid; gap:10px; }
.blog-aside-card h2 { margin:0; font-size:1rem; }
.blog-aside-card a { color:#1E88E5; font-weight:800; }
.blog-related { background:#F8FAFC; }
@media (max-width: 920px) {
  .blog-grid, .blog-layout { grid-template-columns: 1fr; }
  .blog-aside { position: static; }
}


/* official polish extras */
body { padding-bottom: 0; }
@media (max-width: 820px) {
  body { padding-bottom: 86px; }
  .site-footer { padding-bottom: 110px; }
}
.site-header { backdrop-filter: blur(14px); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 16px 36px rgba(31,74,92,.28); }
.mobile-contact-bar a { background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 18px 44px rgba(31,74,92,.34); }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 800; }
.official-strip { background: #fff; border: 1px solid rgba(31,74,92,.08); border-radius: 24px; padding: 18px 20px; display:flex; flex-wrap:wrap; gap:12px 18px; justify-content:space-between; align-items:center; box-shadow: var(--shadow-soft); }
.official-strip strong { font-size: 1rem; }
.official-strip span { color: var(--muted); font-weight: 700; }
.feature-official-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.feature-official-card { background:#fff; border:1px solid rgba(31,74,92,.08); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-soft); }
.feature-official-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.feature-official-card p { margin:0; color: var(--muted); font-weight: 600; }
.blog-home-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 920px) {
  .feature-official-grid, .blog-home-grid { grid-template-columns: 1fr; }
}

.header-actions { margin: 0 !important; gap: 8px !important; }
.header-actions .btn { min-height: 42px; padding-inline: 14px; }
@media (max-width: 980px) {
  .header-actions { display:none !important; }
}


/* SEO / blog media helpers */
.blog-cover { margin: 18px 0 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid rgba(31,74,92,.08); }
.blog-cover img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.blog-card-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; margin-bottom:10px; display:block; }
.seo-toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.seo-toc a { padding:8px 12px; border-radius:999px; background:#fff; border:1px solid rgba(31,74,92,.12); font-weight:800; font-size:.85rem; }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:720px){ .compare-grid{grid-template-columns:1fr;} }
.seo-prose { max-width: 820px; margin-inline: auto; }
.seo-prose p, .seo-prose li { color:#42536A; font-weight:600; }
a.feature-official-card { display:block; color:inherit; }
.seo-toc a:hover { border-color: rgba(31,74,92,.28); color: var(--brand); }
#howto .process-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:1040px){ #howto .process-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:720px){ #howto .process-grid { grid-template-columns: 1fr; } }
a.feature-official-card:hover { box-shadow: 0 18px 44px rgba(7,17,31,.1); }

/* responsive images (2026-10-03) */
picture { display: block; max-width: 100%; }
.blog-card > picture { width: 100%; }
.blog-card-thumb { height: auto; }

/* ===== WordPress / Elementor integration ===== */
.e-con.cs-raw{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--content-width:100%;--container-max-width:100%;--width:100%;padding:0;max-width:100%}
.e-con.cs-raw>.elementor-widget,.e-con.cs-raw .elementor-widget-html{width:100%;max-width:100%;margin:0}
.elementor-widget-html>.elementor-widget-container{padding:0;margin:0}
.cs-post-main .content-copy img,.cs-post-main figure img{max-width:100%;height:auto}
.blog-pagination{display:flex;gap:.5rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.blog-pagination .page-numbers{padding:.5rem .9rem;border-radius:10px;border:1px solid rgba(5,40,80,.15);text-decoration:none}
.blog-pagination .current{background:#052850;color:#fff}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}

.brand .brand-logo{height:46px;width:auto;display:block}
@media (max-width:640px){.brand .brand-logo{height:38px}}
.footer-brand img{filter:none}
/* ===== v2 design layer (1.1.0) ===== */
:root{--navy:#10233F;--navy-2:#0F3D4C;--navy-3:#145066;--blue:#0F3D4C;--blue-2:#10233F;--cyan:#22B8CF;--accent:#1592A6;--brand:#10233F;--brand-2:#0F3D4C;--soft-blue:#EAF8FB;--ink:#10233F;--line:#E3ECF2;--shadow-blue:0 18px 44px rgba(34,184,207,.22)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(16,35,63,.06)}
.btn-primary,.btn-header{background:linear-gradient(135deg,#0F3D4C,#10233F);color:#fff;box-shadow:0 10px 26px rgba(16,35,63,.22)}
.btn-primary:hover,.btn-header:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(16,35,63,.28)}
.v2 h2{color:var(--ink)}
.v2-sec{padding:84px 0}.v2-sec.soft{background:linear-gradient(180deg,#F4FAFC,#fff)}
.v2-head{max-width:720px;margin:0 auto 40px;text-align:center}
.v2-head h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.5;margin:.4rem 0}
.v2-head p{color:var(--muted);line-height:2}
.v2-kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#E6F7FA;color:#0F3D4C;font-weight:700;font-size:.82rem}
.v2-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan)}
/* icons */
.ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#E3F6F9,#F7FCFD);border:1px solid #D5EEF3;flex:none}
.ico svg{width:26px;height:26px;fill:none;stroke:#0F3D4C;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico svg .a{stroke:#22B8CF}
/* hero */
.v2-hero{position:relative;overflow:hidden;padding:72px 0 56px;background:radial-gradient(900px 420px at 85% -10%,rgba(34,184,207,.18),transparent 60%),radial-gradient(700px 380px at 0% 30%,rgba(15,61,76,.10),transparent 60%),linear-gradient(180deg,#F5FBFD,#fff)}
.v2-hero .grid{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.v2-hero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.45;color:var(--ink);margin:.7rem 0}
.v2-hero h1 em{font-style:normal;background:linear-gradient(90deg,#0F3D4C,#1592A6);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2-hero .lead{font-size:1.08rem;line-height:2.05;color:#475B73;max-width:560px}
.v2-hero .hero-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.v2-hero .note{margin-top:14px;color:var(--muted);font-size:.88rem}
.mock{position:relative;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px rgba(16,35,63,.16);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFCFD}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#D6E2EA}.mock-bar span{margin-inline-start:auto;font-size:.75rem;color:var(--muted);direction:ltr}
.mock-body{display:grid;grid-template-columns:150px 1fr;min-height:330px}
.mock-side{background:linear-gradient(180deg,#10233F,#0F3D4C);padding:16px 12px;display:flex;flex-direction:column;gap:6px}
.mock-side b{color:#fff;font-size:.8rem;margin-bottom:8px}
.mock-side span{display:flex;align-items:center;gap:8px;color:#BFD6E0;font-size:.76rem;padding:7px 8px;border-radius:9px}
.mock-side span.on{background:rgba(34,184,207,.18);color:#fff}
.mock-side svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mock-main{padding:16px;display:grid;gap:12px;align-content:start;background:#F7FAFC}
.mock-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.75rem;color:var(--muted)}
.mock-search svg{width:14px;height:14px;fill:none;stroke:#1592A6;stroke-width:2}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-cards div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.mock-cards b{display:block;font-size:.78rem;color:var(--ink)}.mock-cards small{font-size:.68rem;color:var(--muted)}
.mock-cards u{display:block;height:5px;border-radius:5px;margin-top:8px;background:linear-gradient(90deg,#22B8CF var(--w,60%),#E6EEF3 0);text-decoration:none}
.mock-table{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px}
.mock-table div{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.74rem;color:#33475F}
.mock-table div:last-child{border:0}
.pill{font-size:.66rem;padding:2px 8px;border-radius:999px;background:#E6F7FA;color:#0F3D4C;font-weight:700}.pill.g{background:#E8F8EE;color:#17663A}.pill.n{background:#EEF1F6;color:#3E4E66}
.float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(16,35,63,.14);padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--ink)}
.float-card .ico{width:34px;height:34px;border-radius:10px}.float-card .ico svg{width:19px;height:19px}
.float-card small{display:block;color:var(--muted);font-size:.68rem}
.fc1{bottom:-20px;left:-14px}.fc2{top:-18px;left:30px}.mock-wrap{margin-block:22px}
.mock-wrap{position:relative;padding:0 10px}
/* trust */
.trust{padding:26px 0;border-block:1px solid var(--line);background:#fff}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.trust li{display:flex;align-items:center;gap:8px;color:#33475F;font-weight:600;font-size:.92rem}
.trust svg{width:20px;height:20px;fill:none;stroke:#0F3D4C;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.trust svg .a{stroke:#22B8CF}
/* tabs */
.tabs{max-width:1040px;margin:0 auto}
.tabs>input{position:absolute;opacity:0;pointer-events:none}
.tab-list{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;background:#EEF4F7;padding:6px;border-radius:999px;width:max-content;max-width:100%;margin:0 auto 28px}
.tab-list label{cursor:pointer;padding:9px 20px;border-radius:999px;font-weight:700;color:#3E5168;font-size:.95rem;transition:background .2s,color .2s}
.tab-panel{display:none;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 20px 50px rgba(16,35,63,.07)}
#t1:checked~.tab-list label[for=t1],#t2:checked~.tab-list label[for=t2],#t3:checked~.tab-list label[for=t3],#t4:checked~.tab-list label[for=t4]{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(16,35,63,.1)}
#t1:checked~.p1,#t2:checked~.p2,#t3:checked~.p3,#t4:checked~.p4{display:grid;animation:fadeUp .35s ease}
.tabs>input:focus-visible~.tab-list{outline:2px solid #22B8CF;outline-offset:3px}
.tab-panel h3{font-size:1.3rem;color:var(--ink);margin:0 0 .5rem}.tab-panel p{color:#4A5E76;line-height:2}
.checks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;color:#2E4259;line-height:1.9}
.checks li:before{content:"";flex:none;width:20px;height:20px;margin-top:4px;border-radius:50%;background:#E3F6F9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231592A6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.role-art{background:linear-gradient(150deg,#10233F,#0F3D4C);border-radius:18px;padding:22px;display:grid;gap:10px}
.role-art div{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;color:#E3EEF3;font-size:.86rem}
.role-art .ico{width:36px;height:36px;border-radius:10px;background:rgba(34,184,207,.16);border-color:rgba(34,184,207,.3)}
.role-art .ico svg{width:20px;height:20px;stroke:#fff}
/* feature grid */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .25s,box-shadow .25s,border-color .25s}
.fcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(16,35,63,.1);border-color:#C6E9F0}
.fcard h3{font-size:1.05rem;color:var(--ink);margin:14px 0 6px}
.fcard p{color:#53667D;line-height:1.95;font-size:.93rem;margin:0}
.fcard a{display:inline-block;margin-top:10px;color:#0F3D4C;font-weight:700;font-size:.88rem}
.fcard .tag{font-size:.7rem;font-weight:700;color:#0F6474;background:#E3F6F9;padding:2px 8px;border-radius:999px;margin-inline-start:6px;vertical-align:middle}
.more{text-align:center;margin-top:28px}
/* what's new */
.wn{position:relative;border-radius:28px;padding:40px;background:radial-gradient(600px 260px at 100% 0,rgba(34,184,207,.25),transparent 60%),linear-gradient(140deg,#10233F,#0F3D4C);color:#E6F1F5;overflow:hidden}
.wn h2{color:#fff;margin:.6rem 0 .4rem;font-size:clamp(1.4rem,2.6vw,2rem)}
.wn>p{color:#B9D0DA;max-width:640px;line-height:2}
.wn .v2-kicker{background:rgba(34,184,207,.16);color:#BFF3FA}
.wn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.wn-grid div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px}
.wn-grid .ico{background:rgba(34,184,207,.15);border-color:rgba(34,184,207,.3)}.wn-grid .ico svg{stroke:#fff}
.wn-grid h3{color:#fff;font-size:1rem;margin:12px 0 4px}.wn-grid p{color:#B9D0DA;font-size:.9rem;line-height:1.9;margin:0}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 20px}
.step:before{counter-increment:s;content:counter(s,persian);display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#22B8CF,#0F3D4C);color:#fff;font-weight:800;margin-bottom:14px}
.step h3{font-size:1rem;color:var(--ink);margin:0 0 6px}.step p{color:#53667D;font-size:.92rem;line-height:1.9;margin:0}
/* pricing teaser */
.price-band{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:0 20px 50px rgba(16,35,63,.06)}
.price-band h2{margin:.5rem 0}.price-band p{color:#4A5E76;line-height:2}
/* faq */
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 18px;margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.faq-list details[open]{border-color:#BFE6EE;box-shadow:0 12px 30px rgba(16,35,63,.07)}
.faq-list summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:12px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#E6F7FA;color:#0F3D4C;font-weight:800;transition:transform .25s}
.faq-list details[open] summary:after{transform:rotate(45deg)}
.faq-list details p{color:#4A5E76;line-height:2;margin:0 0 16px}
/* cta band */
.cta-band{border-radius:28px;padding:44px;text-align:center;color:#fff;background:radial-gradient(500px 200px at 50% 0,rgba(34,184,207,.35),transparent 70%),linear-gradient(135deg,#0F3D4C,#10233F)}
.cta-band h2{color:#fff;margin:0 0 .5rem}.cta-band p{color:#C3D8E0;margin:0 auto 22px;max-width:600px;line-height:2}
.cta-band .btn-primary{background:#fff;color:#10233F}.cta-band .btn-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.cta-band .hero-actions{justify-content:center;display:flex;gap:12px;flex-wrap:wrap}
/* catalog (features page) */
.cat{margin-bottom:46px}.cat-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}.cat-h h2{margin:0;font-size:1.35rem}
.cat-h p{margin:0;color:var(--muted);font-size:.92rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes floaty{50%{transform:translateY(-6px)}}
.float-card{animation:floaty 6s ease-in-out infinite}.fc2{animation-delay:-3s}
@media (prefers-reduced-motion:reduce){.float-card,.tab-panel{animation:none!important}.fcard,.btn{transition:none!important}.fcard:hover{transform:none}}
@media (max-width:980px){.v2-hero .grid,.tab-panel,.price-band{grid-template-columns:1fr}.fgrid,.wn-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.fc2{display:none}}
@media (max-width:620px){.v2-sec{padding:60px 0}.fgrid,.wn-grid,.steps{grid-template-columns:1fr}.mock-body{grid-template-columns:1fr}.mock-side{display:none}.mock-cards{grid-template-columns:repeat(3,1fr)}.wn,.cta-band,.price-band,.tab-panel{padding:24px}.fc1{left:4px;bottom:8px}.tab-list label{padding:8px 14px}}
.solution-item{padding:18px 72px 18px 20px;display:block}.solution-item::before{right:18px;top:20px}.solution-item::after{right:30px;top:32px}.solution-item.active{background:linear-gradient(135deg,#10233F,#0F3D4C)}.solution-item em{display:block;margin-top:6px;font-style:normal;font-weight:700;color:#0F3D4C}.solution-item span{display:block}

.wn,.cta-band,.role-art{background-color:#10233F}.btn-primary,.btn-header{background-color:#10233F}.cta-band .btn-primary{background:#fff}