html, body, button, input, select, textarea {
font-family: Vazirmatn, Tahoma, sans-serif;
}
a[href^="tel:"] {
direction: ltr;
unicode-bidi: isolate;
}
html { scroll-behavior: smooth; }
.site-header {
font-family: Vazirmatn, Tahoma, sans-serif;
z-index: 50;
top: 0.55rem;
left: 0.75rem;
right: 0.75rem;
width: auto;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.52);
backdrop-filter: blur(22px) saturate(190%);
-webkit-backdrop-filter: blur(22px) saturate(190%);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 8px 28px rgba(17, 24, 39, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header { background: rgba(255, 255, 255, 0.94); }
}
.site-header .header-nav { padding-top: 0.1rem; padding-bottom: 0.1rem; background: transparent; }
.site-header a:has(.logo-img) { line-height: 0; }
.site-header .logo-img { height: 3.1rem; width: auto; display: block; }
@media (min-width: 640px) { .site-header .logo-img { height: 3.55rem; } }
@media (min-width: 1024px) { .site-header .logo-img { height: 3.9rem; } }
.site-header .menu-link {
display: block;
padding: 0.35rem 0.75rem;
color: #374151;
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
}
.site-header .menu-link:hover { color: #ff6b00; }
.site-header .has-sub { position: relative; }
.site-header .has-sub > .menu-link {
position: relative;
}
.site-header .has-sub > .menu-link::after {
content: "";
position: absolute;
left: 50%;
top: calc(100% + 0.08rem);
width: 0.34rem;
height: 0.34rem;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: translateX(-50%) rotate(45deg);
opacity: 0.5;
pointer-events: none;
}
.site-header .has-sub:hover > .menu-link::after,
.site-header .has-sub:focus-within > .menu-link::after { opacity: 0.85; }
.site-header .submenu {
display: none;
min-width: 12rem;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(36px) saturate(180%);
-webkit-backdrop-filter: blur(36px) saturate(180%);
border: 1px solid rgba(226, 213, 199, 0.9);
border-radius: 0.85rem;
box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16);
padding: 0.4rem 0;
z-index: 60;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header .submenu { background: #fff; }
}
.site-header .has-sub:hover > .submenu,
.site-header .has-sub:focus-within > .submenu { display: block; }
.site-header .submenu a {
display: block;
padding: 0.55rem 1rem;
color: #1f2937;
font-weight: 600;
font-size: 0.875rem;
}
.site-header .submenu a:hover { background: rgba(255, 107, 0, 0.14); color: #ff6b00; }
.site-header .login-btn {
display: inline-flex;
align-items: center;
color: #fff;
background: #ff6b00;
border: 1.5px solid #ff6b00;
box-shadow: 0 4px 12px rgba(255, 107, 0, .25);
transition: background-color .15s ease, border-color .15s ease;
font-weight: 600;
font-size: 0.875rem;
border-radius: 0.5rem;
padding: 0.38rem 0.9rem;
white-space: nowrap;
}
.site-header .login-btn:hover { background: #e85f00; border-color: #e85f00; color: #fff; }
.site-header .header-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-end: 0.35rem; }
.site-header .login-desktop { display: none; }
.site-header .login-mobile { display: inline-flex; margin: 0.75rem 0.75rem 1rem; }
.site-header .menu-list { display: flex; flex-direction: column; gap: 0.15rem; }
@media (min-width: 640px) {
.site-header .login-desktop { display: inline-flex; }
.site-header .login-mobile { display: none; }
}
@media (min-width: 1024px) {
.site-header .menu-list { flex-direction: row; align-items: center; gap: 0.15rem; margin-top: 0; }
.site-header .submenu {
position: absolute; top: calc(100% + 0.35rem); right: 0;
display: block;
visibility: hidden; opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility 0s linear .28s;
}
/* invisible bridge covering the gap between the link and the dropdown */
.site-header .submenu::before {
content: "";
position: absolute;
top: -0.6rem; left: 0; right: 0;
height: 0.6rem;
}
.site-header .has-sub:hover > .submenu,
.site-header .has-sub:focus-within > .submenu {
visibility: visible; opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
.site-header .menu-link { padding: 0.28rem 0.5rem; }
}
@media (max-width: 1023px) {
.site-header .has-sub > .menu-link { padding-bottom: 1.05rem; }
.site-header .submenu {
position: static;
box-shadow: none;
margin: 0.2rem 0.55rem 0.35rem;
padding-right: 0;
}
.site-header .has-sub:hover > .submenu { display: none; }
.site-header .has-sub.open > .submenu { display: block; }
}
.hero-pad { padding-top: 4.5rem; }
@media (min-width: 1024px) { .hero-pad { padding-top: 5.1rem; } }
.site-header .nav-wrap {
max-width: 90rem;
padding-inline-start: 1.15rem;
padding-inline-end: 1.85rem;
}
@media (min-width: 1024px) {
.site-header .nav-wrap { padding-inline-end: 2.15rem; }
}
.hero-section { font-family: Vazirmatn, Tahoma, sans-serif; background: #fff; }
.hero-grid { align-items: center; }
.hero-copy { text-align: right; }
.hero-title {
margin: 0 0 0.7rem;
font-size: 1.85rem;
font-weight: 800;
line-height: 1.35;
color: #111827;
letter-spacing: -0.02em;
}
.hero-title .mark { color: #ff6b00; }
@media (min-width: 768px) { .hero-title { font-size: 2.35rem; } }
@media (min-width: 1280px) { .hero-title { font-size: 2.65rem; } }
.hero-sub {
margin: 0 0 1.5rem;
font-size: 1.05rem;
font-weight: 600;
color: #4b5563;
line-height: 1.8;
}
@media (min-width: 768px) { .hero-sub { font-size: 1.2rem; } }
.hero-cols {
display: grid;
grid-template-columns: 1fr;
gap: 1.15rem 1.75rem;
margin-bottom: 1.6rem;
}
@media (min-width: 640px) { .hero-cols { grid-template-columns: 1fr 1fr; } }
.hero-col h2 {
margin: 0 0 0.65rem;
font-size: 0.92rem;
font-weight: 800;
color: #ff6b00;
}
.hero-col ul { list-style: none; margin: 0; padding: 0; }
.hero-col li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: #374151;
line-height: 1.65;
}
.hero-col li svg { flex-shrink: 0; width: 1.05rem; height: 1.05rem; color: #ff6b00; margin-top: 0.18rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.92rem;
border-radius: 0.75rem;
padding: 0.72rem 1.2rem;
text-decoration: none;
}
.hero-btn-primary {
color: #ff6b00;
background: #fff;
border: 1.5px solid #ff6b00;
}
.hero-btn-primary:hover { background: #fff4ec; color: #e05e00; }
.hero-btn-ghost { color: #111827; background: #fff; border: 1px solid #e5e7eb; }
.hero-btn-ghost:hover { border-color: #ff6b00; color: #ff6b00; }
.hero-visual { display: flex; justify-content: center; margin-top: 1.5rem; }
.hero-visual img { width: 100%; max-width: 28rem; height: auto; }
.map-copy { font-family: Vazirmatn, Tahoma, sans-serif; text-align: right; color: #6b7280; }
.map-copy .map-kicker { color: #ff6b00; font-weight: 700; font-size: 1.05rem; margin: 0 0 0.5rem; }
.map-copy ul {
display: flex;
flex-direction: column;
gap: 1.35rem;
margin: 2rem 0 2.25rem;
padding-top: 2rem;
}
.map-copy li {
display: flex;
align-items: flex-start;
gap: 0.95rem;
}
.map-copy li span {
line-height: 1.85;
}
@media (min-width: 1024px) {
.hero-visual { margin-top: 0; }
.hero-visual img { max-width: none; }
}
.plans-section { font-family: Vazirmatn, Tahoma, sans-serif; background: #f6f4f8; padding: 4.5rem 1rem 5.5rem; scroll-margin-top: 5.5rem; }
.plans-wrap { max-width: 1240px; margin: 0 auto; }
.plans-title { text-align: center; font-size: 1.85rem; font-weight: 800; color: #111827; margin: 0 0 0.75rem; }
.plans-title .mark { color: #ff6b00; position: relative; display: inline-block; }
.plans-title .mark::after {
content: "";
position: absolute;
right: 0; left: 0; bottom: -4px;
height: 8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q30 0 60 7 T120 7' fill='none' stroke='%23ff6b00' stroke-width='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.plans-sub { text-align: center; color: #6b7280; font-size: 0.95rem; max-width: 36rem; margin: 0 auto 2.75rem; line-height: 1.9; }
.plans-grid { display: grid; grid-template-columns: 1fr; gap: 1.35rem; align-items: stretch; padding-top: 0.85rem; }
@media (min-width: 768px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .plans-grid { grid-template-columns: repeat(4, 1fr); } }
.plan-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #eeeaf2;
border-radius: 1.5rem;
box-shadow: 0 12px 40px rgba(17,24,39,.06);
padding: 1.6rem 1.35rem 1.4rem;
min-height: 100%;
}
.plan-card.featured {
background: linear-gradient(180deg, #fff8f3 0%, #ffffff 42%);
border: 1.5px solid #ff6b00;
box-shadow: 0 18px 50px rgba(233,111,50,.18);
transform: translateY(-6px);
padding-top: 2rem;
}
.plan-badge {
position: absolute;
top: -12px;
right: 50%;
transform: translateX(50%);
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: linear-gradient(90deg, #ff8c33, #ff6b00);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
padding: 0.32rem 0.85rem;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(233,111,50,.35);
}
.plan-badge svg { width: 0.85rem; height: 0.85rem; }
.plan-name {
margin: 0.15rem 0 0.7rem;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: 0;
color: #ff6b00;
line-height: 1.3;
text-align: center;
}
.plan-card.featured .plan-name { font-size: 1.45rem; }
.plan-price { margin: 0; font-size: 2rem; font-weight: 800; color: #111827; letter-spacing: -0.03em; line-height: 1.1; text-align: center; }
.plan-price small { font-size: 0.85rem; font-weight: 600; color: #6b7280; }
.plan-period { margin: 0.35rem 0 0.7rem; font-size: 0.8rem; color: #9ca3af; text-align: center; }
.plan-desc { margin: 0 0 1.1rem; font-size: 0.88rem; color: #4b5563; line-height: 1.7; text-align: center; }
.plan-card hr { border: 0; border-top: 1px solid #efeaf3; margin: 0 0 1.1rem; }
.plan-features { list-style: none; margin: 0 0 1.4rem; padding: 0; flex: 1; }
.plan-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: #374151; line-height: 1.65; margin-bottom: 0.7rem; }
.plan-check {
flex-shrink: 0;
width: 1.35rem;
height: 1.35rem;
border-radius: 0.4rem;
background: #e8f8ee;
color: #16a34a;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.05rem;
}
.plan-check svg { width: 0.75rem; height: 0.75rem; }
.plan-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: auto;
text-align: center;
color: #111827;
background: #fff;
border: 1px solid #e5e7eb;
font-weight: 700;
font-size: 0.92rem;
border-radius: 0.9rem;
padding: 0.78rem 1rem;
text-decoration: none;
transition: .2s ease;
}
.plan-btn:hover { border-color: #ff6b00; color: #ff6b00; }
.plan-card.featured .plan-btn {
color: #fff;
border: 0;
background: linear-gradient(90deg, #ff8c33, #ff6b00);
box-shadow: 0 8px 20px rgba(233,111,50,.28);
}
.plan-card.featured .plan-btn:hover { filter: brightness(1.05); color: #fff; }
@media (min-width: 1100px) {
.plan-card.featured { transform: translateY(-10px); }
}
.site-block { font-family: Vazirmatn, Tahoma, sans-serif; }
.site-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
.vip-banner {
background: #fff;
color: #111827;
padding: 2.2rem 1rem 0.4rem;
}
.vip-inner {
position: relative;
overflow: hidden;
display: grid;
gap: 1.15rem;
align-items: center;
text-align: center;
background:
radial-gradient(18rem 10rem at 92% -30%, rgba(255, 107, 0, .16), transparent 62%),
#fff;
border: 1px solid #efe8df;
border-radius: 1.45rem;
padding: 1.55rem 1.35rem 1.45rem;
box-shadow: 0 14px 34px rgba(17, 24, 39, .06);
}
.vip-inner::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
@media (min-width: 800px) {
.vip-inner {
grid-template-columns: 1fr auto;
text-align: right;
padding: 1.7rem 1.7rem 1.55rem;
}
}
.vip-banner h2 { margin: 0 0 0.3rem; font-size: 1.28rem; font-weight: 800; color: #111827; }
.vip-banner p { margin: 0; font-size: 0.95rem; line-height: 1.8; color: #6b7280; }
.vip-banner a {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ff6b00;
color: #fff;
font-weight: 800;
font-size: 0.9rem;
border-radius: 999px;
padding: 0.58rem 1.25rem;
text-decoration: none;
box-shadow: 0 8px 18px rgba(255, 107, 0, .25);
white-space: nowrap;
}
.vip-banner a:hover { background: #e85f00; color: #fff; }
.pillars { background: #fff; padding: 3.5rem 0; }
.pillars-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 768px) { .pillars-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } }
.pillar-card, .value-card, .service-card, .blog-card {
background: #fff; border: 1px solid #eeeaf2; border-radius: 1.15rem;
padding: 1.4rem 1.25rem; box-shadow: 0 10px 28px rgba(17,24,39,.05); text-align: right;
display: block; text-decoration: none; color: inherit;
}
.pillar-card h3, .value-card h3, .service-card h3, .blog-card h3 {
margin: 0 0 0.5rem; color: #111827; font-size: 1.05rem; font-weight: 800;
}
.pillar-card p, .value-card p, .service-card p, .blog-card p {
margin: 0; color: #6b7280; font-size: 0.9rem; line-height: 1.85;
}
.stats { background: #111827; color: #fff; padding: 2.8rem 0; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; text-align: center; }
@media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(6, 1fr); } }
.stat-item { background: transparent; border: 0; padding: 0; }
.stat-num { font-size: 1.35rem; font-weight: 800; color: #ff6b00; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.82rem; color: #d1d5db; }
.split-sec { background: #f8f7fa; padding: 4rem 0; }
.split-sec.alt { background: #fff; }
.split-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .split-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.split-grid .split-shot {
width: 100%;
height: auto;
display: block;
border-radius: 1.15rem;
box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
border: 1px solid rgba(17, 24, 39, .06);
background: #fff;
}
@media (min-width: 1024px) {
.split-sec--shot-wide .split-grid {
grid-template-columns: 0.85fr 1.25fr;
gap: 2.2rem;
}
.split-sec--shot-wide .split-shot {
transform: scale(1.06);
transform-origin: center;
}
}
.split-copy h2 { margin: 0 0 0.7rem; font-size: 1.7rem; font-weight: 800; color: #111827; }
.split-copy p { margin: 0 0 1rem; color: #6b7280; line-height: 1.9; font-size: 0.98rem; }
.split-copy ul { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.split-copy li { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 0.65rem; color: #374151; font-size: 0.92rem; line-height: 1.7; }
.split-copy li svg { flex-shrink: 0; width: 1.15rem; height: 1.15rem; color: #ff6b00; margin-top: 0.15rem; }
.site-btn {
display: inline-flex; align-items: center; justify-content: center;
background: #ff6b00; color: #fff; font-weight: 800; font-size: 0.9rem;
border-radius: 0.75rem; padding: 0.7rem 1.2rem; text-decoration: none;
}
.site-btn.ghost { background: #fff; color: #ff6b00; border: 1.5px solid #ff6b00; }
.services { background: #fff; padding: 4rem 0; }
.sec-title { text-align: center; font-size: 1.7rem; font-weight: 800; color: #111827; margin: 0 0 0.5rem; }
.sec-sub { text-align: center; color: #6b7280; max-width: 36rem; margin: 0 auto 2.2rem; line-height: 1.9; }
.services-grid { display: grid; gap: 1.15rem; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.values-extra { background: #f8f7fa; padding: 0 0 4rem; }
.values-grid { display: grid; gap: 1.15rem; }
@media (min-width: 768px) { .values-grid { grid-template-columns: 1fr 1fr; } }
.values-extra .value-card h3 { color: #111827 !important; }
.bio { background: #faf6f1; padding: 4rem 0; }
.duo-grid {
display: grid;
gap: 1.3rem;
align-items: stretch;
}
@media (min-width: 900px) { .duo-grid { grid-template-columns: 1fr 1fr; } }
.duo-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.45rem;
padding: 1.5rem 1.35rem 1.4rem;
box-shadow: 0 14px 34px rgba(17, 24, 39, .06);
}
.duo-card::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
.duo-top {
display: flex;
align-items: center;
gap: 0.85rem;
min-height: 4.4rem;
margin: 0 0 0.95rem;
}
.duo-kicker {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
color: #111827;
font-size: 0.88rem;
font-weight: 800;
}
.duo-kicker::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: #ff6b00;
}
.duo-top .bio-role {
margin: 0;
color: #111827;
font-size: 0.95rem;
font-weight: 800;
}
.duo-top span {
display: block;
margin-top: 0.12rem;
color: #6b7280;
font-size: 0.8rem;
}
.duo-card .bio-portrait {
width: 4.35rem;
height: 4.35rem;
margin: 0;
flex: 0 0 auto;
padding: 0.25rem 0.2rem 0;
}
.duo-card h2 {
margin: 0 0 0.45rem;
min-height: 3.3rem;
color: #111827;
font-size: 1.18rem;
font-weight: 800;
line-height: 1.45;
}
.duo-card > p {
margin: 0 0 0.95rem;
min-height: 4.6rem;
color: #6b7280;
font-size: 0.92rem;
line-height: 1.85;
}
.duo-card ul {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
flex: 1;
}
.duo-card li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin: 0 0 0.5rem;
color: #374151;
font-size: 0.9rem;
line-height: 1.7;
}
.duo-card li svg {
flex-shrink: 0;
width: 1.05rem;
height: 1.05rem;
color: #ff6b00;
margin-top: 0.18rem;
}
.duo-card .site-btn {
align-self: flex-start;
margin-top: auto;
border-radius: 999px;
background: #111827;
color: #fff;
box-shadow: none;
}
.duo-card .site-btn:hover { background: #1f2937; color: #fff; }
.duo-card .site-btn.ghost {
background: #fff;
color: #111827;
border: 1.5px solid #111827;
}
.duo-card .site-btn.ghost:hover { background: rgba(17, 24, 39, .06); color: #111827; }
.contact-strip {
background: #fff;
color: #111827;
padding: 0.4rem 1rem 1.2rem;
}
.contact-inner {
position: relative;
overflow: hidden;
display: grid;
gap: 1.15rem;
align-items: center;
text-align: center;
background:
radial-gradient(18rem 10rem at 92% -30%, rgba(255, 107, 0, .16), transparent 62%),
#fff;
border: 1px solid #efe8df;
border-radius: 1.45rem;
padding: 1.55rem 1.35rem 1.45rem;
box-shadow: 0 14px 34px rgba(17, 24, 39, .06);
}
.contact-inner::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
@media (min-width: 800px) {
.contact-inner {
grid-template-columns: 1fr auto;
text-align: right;
padding: 1.7rem 1.7rem 1.55rem;
}
}
.contact-strip h2 {
margin: 0 0 0.3rem;
font-size: 1.18rem;
font-weight: 800;
color: #111827;
}
.contact-strip .lead { margin: 0; color: #6b7280; line-height: 1.8; }
.contact-strip .contact-phone {
display: inline-flex;
align-items: center;
justify-content: center;
background: #111827;
color: #fff;
font-size: 0.95rem;
font-weight: 800;
text-decoration: none;
letter-spacing: .02em;
direction: ltr;
unicode-bidi: isolate;
border-radius: 999px;
padding: 0.58rem 1.2rem;
box-shadow: none;
white-space: nowrap;
}
.contact-strip .contact-phone:hover { background: #1f2937; color: #fff; }
.blog-sec { background: #fff; padding: 3.2rem 0 4rem; }
.blog-grid { display: grid; gap: 1.15rem; align-items: stretch; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { display: flex; flex-direction: column; text-decoration: none; }
.blog-sec .blog-card {
position: relative;
overflow: hidden;
}
.blog-sec .blog-card::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
.blog-sec .blog-card h3 {
margin: 0 0 0.4rem;
color: #111827;
font-size: 1.05rem;
font-weight: 800;
line-height: 1.5;
min-height: 3.15rem;
}
.site-footer {
position: relative;
background: linear-gradient(180deg, #2b3548 0%, #222b3c 100%);
color: #dbe0e8;
padding: 2.5rem 0 1.2rem;
}
.site-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 8%, #ff6b00 50%, transparent 92%);
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.footer-links-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.site-footer h3 {
position: relative;
color: #fff;
font-size: 0.95rem;
margin: 0 0 1.1rem;
padding-bottom: 0.6rem;
}
.site-footer h3::after {
content: "";
position: absolute;
bottom: 0; right: 0;
width: 2rem; height: 2px;
border-radius: 2px;
background: #ff6b00;
}
.site-footer p { margin: 0; line-height: 2; font-size: 0.9rem; color: #d4dae4; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer a { color: #f1f4f8; text-decoration: none; font-size: 0.9rem; transition: color .15s ease; }
.site-footer a:hover { color: #ff8c3d; }
.site-footer ul a {
position: relative;
display: inline-block;
padding-right: 0.95rem;
}
.site-footer ul a::before {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0.35rem; height: 0.35rem;
border-radius: 50%;
background: rgba(255, 140, 61, .8);
transition: background-color .15s ease;
}
.site-footer ul a:hover::before { background: #ff8c3d; }
.footer-logo {
display: inline-flex;
background: #fff;
border-radius: 0.85rem;
padding: 0.4rem 0.75rem;
margin-bottom: 1.1rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.footer-logo img { height: 2.7rem; display: block; }
.footer-phone {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
gap: 0.55rem;
margin-top: 1.2rem;
padding: 0.5rem 1.05rem;
border-radius: 999px;
background: rgba(255, 107, 0, .18);
border: 1px solid rgba(255, 140, 61, .55);
color: #fff !important;
font-weight: 800;
font-size: 1rem !important;
letter-spacing: .02em;
}
.footer-phone span {
color: #e3e8ef;
font-weight: 600;
font-size: 0.8rem;
}
.footer-phone:hover { background: rgba(255, 107, 0, .22); color: #fff !important; }
.footer-enamad {
display: flex;
margin-top: 1.2rem;
}
.footer-enamad img {
display: block;
height: auto;
max-width: 100px;
}
.footer-copy {
border-top: 1px solid rgba(255, 255, 255, .12);
margin-top: 1.6rem;
padding-top: 1rem;
text-align: center;
font-size: 0.82rem;
color: #c2c9d6;
}
body.inner-page { background: #faf6f1; }
.page-main { font-family: Vazirmatn, Tahoma, sans-serif; padding: 0 0 0; }
.page-banner {
position: relative;
overflow: hidden;
text-align: center;
padding: 7.6rem 1rem 3rem;
background:
radial-gradient(circle at 12% 20%, rgba(255,107,0,.16), transparent 34%),
radial-gradient(circle at 88% 6%, rgba(255,107,0,.1), transparent 30%),
#faf6f1;
color: #111827;
}
.page-kicker {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.85rem;
padding: 0.28rem 0.8rem;
border: 1px solid rgba(255,107,0,.35);
border-radius: 999px;
background: #fff;
color: #111827;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: .02em;
}
.page-kicker::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: #ff6b00;
}
.page-banner h1 {
margin: 0 auto 0.7rem;
max-width: 42rem;
font-size: 1.95rem;
font-weight: 800;
color: #111827;
line-height: 1.45;
}
.page-banner p.lead {
margin: 0 auto;
max-width: 38rem;
color: #4b5563;
line-height: 1.95;
font-size: 0.98rem;
}
.page-banner-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.65rem;
margin-top: 1.35rem;
}
.page-banner .site-btn { background: #ff6b00; color: #fff; }
.page-banner .site-btn.ghost {
background: #fff;
color: #111827;
border: 1.5px solid #111827;
}
.page-body { max-width: 1240px; margin: 0 auto; padding: 2.4rem 1rem 4.2rem; }
/* About page: services grid */
.svc-head { text-align: center; margin: 1.6rem 0 2rem; }
.svc-head h2 { margin: 0 0 0.5rem; color: #111827; font-size: 1.6rem; font-weight: 800; }
.svc-head p { margin: 0; color: #6b7280; line-height: 1.9; }
.svc-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #f0e7dc;
border-radius: 1.1rem;
padding: 1.5rem 1.35rem 1.3rem;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.svc-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 107, 0, .45);
box-shadow: 0 18px 36px rgba(122, 51, 0, .10);
}
.svc-card h3 { margin: 0 0 0.5rem; color: #111827; font-size: 1.02rem; font-weight: 800; }
.svc-card p { margin: 0 0 1.1rem; color: #6b7280; font-size: 0.88rem; line-height: 1.95; flex: 1; }
.svc-more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #ff6b00;
font-size: 0.82rem;
font-weight: 700;
}
.svc-more::after { content: "\2190"; transition: transform .15s ease; }
.svc-card:hover .svc-more::after { transform: translateX(-3px); }
/* About page: CTA panel */
.about-cta {
position: relative;
overflow: hidden;
display: grid;
gap: 1.6rem;
align-items: center;
background:
radial-gradient(24rem 14rem at 88% -20%, rgba(255, 107, 0, .22), transparent 65%),
linear-gradient(135deg, #222c3f 0%, #161e2e 100%);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 1.4rem;
padding: 2.4rem 1.8rem;
margin-top: 2.6rem;
text-align: center;
}
@media (min-width: 800px) {
.about-cta { grid-template-columns: 1fr auto; text-align: right; padding: 2.6rem 2.4rem; }
}
.about-cta-copy h2 { margin: 0 0 0.5rem; color: #fff; font-size: 1.45rem; font-weight: 800; }
.about-cta-copy p { margin: 0; color: #b9c2d0; line-height: 1.9; }
.about-cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.75rem;
}
.about-cta-btn {
display: inline-flex;
align-items: center;
background: #ff6b00;
color: #fff;
font-weight: 800;
font-size: 0.95rem;
padding: 0.68rem 1.7rem;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 10px 24px rgba(255, 107, 0, .3);
transition: background-color .15s ease;
}
.about-cta-btn:hover { background: #e85f00; }
.about-cta-phone {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
gap: 0.5rem;
padding: 0.62rem 1.3rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .25);
color: #fff !important;
font-weight: 800;
font-size: 0.95rem;
text-decoration: none;
transition: border-color .15s ease;
}
.about-cta-phone:hover { border-color: rgba(255, 255, 255, .55); }
.about-cta-phone span { color: #c3cad6; font-weight: 600; font-size: 0.8rem; }
/* Contact page */
.contact-hero {
background:
radial-gradient(circle at 12% 20%, rgba(255,107,0,.16), transparent 34%),
radial-gradient(circle at 88% 6%, rgba(255,107,0,.1), transparent 30%),
#faf6f1;
padding: 6.4rem 0 0;
color: #111827;
}
.contact-hero-grid {
display: grid;
gap: 1.6rem;
align-items: center;
}
.contact-hero-copy {
text-align: center;
padding: 0.4rem 0 0.2rem;
}
.contact-kicker {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.9rem;
padding: 0.28rem 0.8rem;
border: 1px solid rgba(255, 107, 0, .35);
border-radius: 999px;
background: #fff;
color: #111827;
font-size: 0.78rem;
font-weight: 700;
}
.contact-kicker::before {
content: "";
width: 0.45rem; height: 0.45rem;
border-radius: 50%;
background: #ff6b00;
}
.contact-hero-copy h1 {
margin: 0 0 0.85rem;
font-size: 2.05rem;
font-weight: 800;
color: #111827;
line-height: 1.4;
}
.contact-hero-copy .lead {
margin: 0 auto 1.5rem;
max-width: 28rem;
color: #4b5563;
line-height: 2;
font-size: 0.98rem;
}
.contact-hero .contact-phone {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
margin: 0 0 1.2rem;
color: #111827 !important;
text-decoration: none;
font-weight: 800;
font-size: 1.85rem;
letter-spacing: .02em;
direction: rtl;
unicode-bidi: isolate;
}
.contact-hero .contact-phone span {
color: #8a8f99;
font-size: 0.78rem;
font-weight: 600;
align-self: stretch;
text-align: right;
}
.contact-hero .contact-phone bdi { direction: ltr; unicode-bidi: isolate; }
.contact-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.65rem;
margin-bottom: 0.9rem;
}
.contact-btn {
display: inline-flex;
align-items: center;
background: #ff6b00;
color: #fff;
font-weight: 800;
font-size: 0.92rem;
padding: 0.62rem 1.45rem;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 10px 24px rgba(255, 107, 0, .28);
transition: background-color .15s ease;
}
.contact-btn:hover { background: #e85f00; }
.contact-btn.ghost {
background: #fff;
color: #111827;
border: 1.5px solid #d7d0c8;
box-shadow: none;
}
.contact-btn.ghost:hover { border-color: #111827; }
.contact-hours { margin: 0; color: #8a8f99; font-size: 0.82rem; }
.contact-hero-visual {
margin: 0;
display: flex;
justify-content: center;
}
.contact-hero-visual img {
display: block;
width: min(100%, 28rem);
height: auto;
filter: drop-shadow(0 22px 36px rgba(17, 24, 39, .14));
}
@media (min-width: 960px) {
.contact-hero { padding: 5.2rem 0 0; }
.contact-hero-grid {
grid-template-columns: 0.92fr 1.08fr;
align-items: start;
gap: 1rem;
}
.contact-hero-copy { text-align: right; padding-top: 5.2rem; padding-bottom: 1rem; }
.contact-hero-copy .lead { margin: 0 0 1.5rem; }
.contact-hero .contact-phone { align-items: stretch; }
.contact-hero-actions { justify-content: flex-start; }
.contact-hero-visual { align-self: start; margin-top: -1.8rem; }
.contact-hero-visual img { width: 100%; max-width: 34rem; }
}
.contact-page .page-body {
background: #faf6f1;
max-width: none;
padding: 1.6rem 1rem 4.4rem;
}
.contact-channels {
max-width: 1240px;
margin: 0 auto;
display: grid;
gap: 1rem;
direction: rtl;
}
@media (min-width: 700px) { .contact-channels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact-channels { grid-template-columns: repeat(3, 1fr); } }
.contact-channel {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: right;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.1rem;
padding: 1.45rem 1.3rem 1.25rem;
text-decoration: none;
box-shadow: 0 10px 28px rgba(17,24,39,.05);
position: relative;
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-channel::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
.contact-channel:nth-child(2)::before { background: linear-gradient(90deg, #ff8c3d, #ff6b00); }
.contact-channel:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #ff6b00); }
.contact-channel:nth-child(4)::before { background: linear-gradient(90deg, #fb7185, #ff6b00); }
.contact-channel:nth-child(5)::before { background: linear-gradient(90deg, #f97316, #fdba74); }
.contact-channel:nth-child(6)::before { background: linear-gradient(90deg, #ea580c, #ffb27a); }
.contact-channel:hover {
transform: translateY(-4px);
border-color: rgba(255, 107, 0, .45);
box-shadow: 0 18px 36px rgba(255, 107, 0, .14);
}
.contact-channel h3 {
margin: 0 0 0.45rem;
width: 100%;
color: #111827;
font-size: 1.02rem;
font-weight: 800;
text-align: right;
}
.contact-channel p {
margin: 0 0 1rem;
width: 100%;
color: #6b7280;
font-size: 0.88rem;
line-height: 1.95;
flex: 1;
text-align: right;
}
.contact-channel span {
display: inline-flex;
color: #111827;
font-size: 0.84rem;
font-weight: 800;
text-align: right;
background: #f4f1eb;
border-radius: 999px;
padding: 0.32rem 0.75rem;
}
.contact-channel:hover span { background: #111827; color: #fff; }
.contact-channel[href^="tel:"] span {
direction: ltr;
unicode-bidi: isolate;
}
/* تست استایل کارت نرم (همخانواده با پنل پیامک) */
.contact-channels--soft .contact-channel {
border: none;
border-radius: 1.35rem;
padding: 1.55rem 1.4rem 1.3rem;
padding-inline-start: 1.55rem;
box-shadow:
0 16px 28px rgba(120, 132, 175, 0.16),
0 2px 6px rgba(120, 132, 175, 0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-channels--soft .contact-channel::before {
top: 50%;
right: 0;
left: auto;
bottom: auto;
width: 8px;
height: 3.5rem;
transform: translateY(-50%);
border-radius: 999px 0 0 999px;
}
/* هر کارت رنگ مخصوص خودش */
.contact-channels--soft .contact-channel:nth-child(1)::before {
background: linear-gradient(180deg, #93c5fd, #2563eb);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}
.contact-channels--soft .contact-channel:nth-child(2)::before {
background: linear-gradient(180deg, #fdba74, #ea580c);
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.28);
}
.contact-channels--soft .contact-channel:nth-child(3)::before {
background: linear-gradient(180deg, #6b7280, #111827);
box-shadow: 0 2px 6px rgba(17, 24, 39, 0.35);
}
.contact-channels--soft .contact-channel:nth-child(4)::before {
background: linear-gradient(180deg, #6ee7b7, #059669);
box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28);
}
.contact-channels--soft .contact-channel:nth-child(5)::before {
background: linear-gradient(180deg, #c4b5fd, #7c3aed);
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.28);
}
.contact-channels--soft .contact-channel:nth-child(6)::before {
background: linear-gradient(180deg, #fda4af, #e11d48);
box-shadow: 0 2px 6px rgba(225, 29, 72, 0.28);
}
.contact-channels--soft .contact-channel:hover {
transform: translateY(-2px);
border-color: transparent;
box-shadow:
0 20px 34px rgba(120, 132, 175, 0.2),
0 4px 8px rgba(120, 132, 175, 0.09);
}
.contact-channels--soft .contact-channel h3 {
font-size: 1.05rem;
font-weight: 700;
}
.contact-channels--soft .contact-channel p {
color: #667085;
line-height: 1.85;
}
.contact-channels--soft .contact-channel span {
background: #f3f5f9;
color: #344054;
font-weight: 700;
padding: 0.4rem 0.9rem;
transition: background 0.2s ease, color 0.2s ease;
}
.contact-channels--soft .contact-channel:hover span {
color: #fff;
}
.contact-channels--soft .contact-channel:nth-child(1):hover span { background: #2563eb; }
.contact-channels--soft .contact-channel:nth-child(2):hover span { background: #ea580c; }
.contact-channels--soft .contact-channel:nth-child(3):hover span { background: #111827; }
.contact-channels--soft .contact-channel:nth-child(4):hover span { background: #059669; }
.contact-channels--soft .contact-channel:nth-child(5):hover span { background: #7c3aed; }
.contact-channels--soft .contact-channel:nth-child(6):hover span { background: #e11d48; }
.contact-channels--soft .contact-channel[href^="tel:"] span {
direction: ltr;
unicode-bidi: isolate;
}
.contact-form-section {
background: #faf6f1;
padding: 0 1rem 1.6rem;
}
.contact-form-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
gap: 1.35rem;
direction: rtl;
}
@media (min-width: 960px) {
.contact-form-grid {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
align-items: start;
gap: 1.75rem;
}
}
.contact-form-intro {
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.35rem;
padding: 1.5rem 1.35rem 1.35rem;
box-shadow: 0 14px 32px rgba(17, 24, 39, .05);
}
.contact-form-intro h2 {
margin: 0 0 0.65rem;
color: #111827;
font-size: 1.35rem;
font-weight: 800;
line-height: 1.45;
}
.contact-form-intro .lead {
margin: 0 0 1rem;
color: #6b7280;
font-size: 0.92rem;
line-height: 1.9;
}
.contact-form-notes {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
}
.contact-form-notes li {
position: relative;
padding-right: 1rem;
color: #4b5563;
font-size: 0.88rem;
line-height: 1.75;
}
.contact-form-notes li::before {
content: "";
position: absolute;
right: 0;
top: 0.62rem;
width: 0.38rem;
height: 0.38rem;
border-radius: 50%;
background: #ff6b00;
}
.contact-form-notes a {
color: #111827;
font-weight: 700;
text-decoration: none;
}
.contact-form-notes a:hover { color: #ff6b00; }
.contact-form {
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.35rem;
padding: 1.45rem 1.35rem 1.3rem;
box-shadow: 0 14px 32px rgba(17, 24, 39, .05);
}
.contact-form-row {
display: grid;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
@media (min-width: 640px) {
.contact-form-row { grid-template-columns: 1fr 1fr; }
}
.contact-field {
display: flex;
flex-direction: column;
gap: 0.38rem;
}
.contact-field--full { margin-bottom: 0.85rem; }
.contact-field > span {
color: #111827;
font-size: 0.84rem;
font-weight: 700;
}
.contact-field > span em {
color: #ff6b00;
font-style: normal;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
border: 1px solid #e7dfd4;
border-radius: 0.85rem;
background: #fff;
color: #111827;
padding: 0.72rem 0.85rem;
font-size: 0.92rem;
line-height: 1.5;
transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
outline: none;
border-color: rgba(255, 107, 0, .55);
box-shadow: 0 0 0 3px rgba(255, 107, 0, .12);
}
.contact-field textarea {
resize: vertical;
min-height: 7.5rem;
}
.contact-field select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
background-position: calc(12px) calc(50% - 2px), calc(17px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-left: 2rem;
}
.site-select {
position: relative;
width: 100%;
}
.site-select-native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.site-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
width: 100%;
border: 1px solid #e7dfd4;
border-radius: 0.85rem;
background: #fff;
color: #111827;
padding: 0.72rem 0.85rem;
font-size: 0.92rem;
line-height: 1.5;
cursor: pointer;
text-align: right;
transition: border-color .15s ease, box-shadow .15s ease;
}
.site-select-trigger:hover {
border-color: #d8cfc3;
}
.site-select-trigger:focus {
outline: none;
border-color: rgba(255, 107, 0, .55);
box-shadow: 0 0 0 3px rgba(255, 107, 0, .12);
}
.site-select.is-open .site-select-trigger {
border-color: rgba(255, 107, 0, .55);
box-shadow: 0 0 0 3px rgba(255, 107, 0, .12);
}
.site-select-value {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.site-select.is-placeholder .site-select-value {
color: #9ca3af;
font-weight: 500;
}
.site-select-chevron {
display: grid;
place-items: center;
width: 1.1rem;
height: 1.1rem;
color: #6b7280;
flex-shrink: 0;
transition: transform .18s ease, color .18s ease;
}
.site-select-chevron svg {
width: 1rem;
height: 1rem;
display: block;
}
.site-select.is-open .site-select-chevron {
transform: rotate(180deg);
color: #ff6b00;
}
.site-select-menu {
display: none;
position: fixed;
z-index: 10060;
background: #fff;
border: 1px solid #efe8df;
border-radius: 0.95rem;
box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
padding: 0.45rem;
max-height: 280px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255, 107, 0, .45) transparent;
}
.site-select-menu.is-visible {
display: block;
}
.site-select-option {
display: flex;
align-items: center;
gap: 0.55rem;
justify-content: flex-start;
width: 100%;
border: 0;
border-radius: 0.65rem;
background: transparent;
color: #111827;
padding: 0.62rem 0.75rem;
font-size: 0.9rem;
font-weight: 600;
text-align: right;
cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.site-select-option:hover,
.site-select-option:focus {
outline: none;
background: #faf6f1;
}
.site-select-option.is-selected {
background: #fff7f0;
color: #111827;
}
.site-select-option.is-selected::before {
content: "";
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: #ff6b00;
flex-shrink: 0;
}
.site-select-option.is-disabled,
.site-select-option:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.site-select.is-disabled .site-select-trigger {
opacity: 0.65;
cursor: not-allowed;
}
.contact-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
.contact-form-submit {
border: 0;
border-radius: 999px;
background: #ff6b00;
color: #fff;
font-size: 0.92rem;
font-weight: 700;
padding: 0.78rem 1.35rem;
cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.contact-form-submit:hover:not(:disabled) { background: #e85f00; }
.contact-form-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.contact-form-status {
margin: 0;
font-size: 0.86rem;
font-weight: 600;
}
.contact-form-status.is-success { color: #059669; }
.contact-form-status.is-error { color: #dc2626; }
.about-texture {
/* mobile: portrait artwork fills the box; copy sits in its empty top area */
background: #f4f1eb url("./images/fa-bg1-orang-mob.png") top center / 100% auto no-repeat;
aspect-ratio: 1688 / 3904;
padding: 2.75rem 1.25rem 0;
border-top: 1px solid #efe8df;
border-bottom: 1px solid #efe8df;
}
.about-texture-grid {
display: grid;
gap: 2.5rem;
align-items: center;
justify-items: center;
text-align: center;
}
@media (min-width: 900px) {
/* RTL: copy occupies the right half; the artwork in the background fills the left.
Section keeps the exact image aspect ratio (3903x1688) so nothing gets cropped. */
.about-texture {
aspect-ratio: 3903 / 1688;
background: url("./images/fa-bg1-orang.png") center / 100% 100% no-repeat;
padding: 2rem 1rem;
display: flex;
align-items: center;
}
.about-texture-grid {
width: 100%;
grid-template-columns: 0.9fr 1.1fr;
justify-items: start;
text-align: right;
}
}
.about-texture h2 {
color: #111827;
font-size: 1.6rem;
margin: 1.1rem 0 0.8rem;
}
.about-texture p {
color: #4b5563;
max-width: 34rem;
margin: 0 auto;
line-height: 2.1;
}
@media (min-width: 900px) {
.about-texture p { margin: 0; }
}
.seo-compare {
background: #faf6f1 url("./images/4-mob-2.png") top center / 100% auto no-repeat;
aspect-ratio: 1688 / 3904;
padding: 0 1.25rem 7.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-top: 1px solid #efe8df;
border-bottom: 1px solid #efe8df;
}
.seo-compare-grid {
display: grid;
justify-items: center;
text-align: center;
}
.seo-compare-copy h2 {
color: #111827;
font-size: 1.45rem;
margin: 1rem 0 0.75rem;
font-weight: 800;
line-height: 1.7;
}
.seo-compare-copy p {
color: #4b5563;
max-width: 32rem;
margin: 0 auto;
line-height: 2.05;
}
@media (min-width: 900px) {
.seo-compare {
aspect-ratio: 3904 / 1688;
background: url("./images/4-desktop.png") center / 100% 100% no-repeat;
padding: 2rem 1rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.seo-compare-grid {
width: 100%;
grid-template-columns: 0.95fr 1.05fr;
justify-items: start;
text-align: right;
}
.seo-compare-copy p { margin: 0; }
.seo-compare-copy h2 { font-size: 1.55rem; }
}
.seo-cards .page-card {
position: relative;
overflow: hidden;
padding-top: 1.65rem;
}
.seo-cards .page-card::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
.ig-cards .page-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 11.4rem;
width: 11.4rem;
max-width: 11.4rem;
height: 13rem;
aspect-ratio: auto;
min-height: 0;
overflow: hidden;
text-align: center;
color: #fff;
border: 0;
border-radius: 1.5rem;
padding: 0.95rem 0.9rem 0.85rem;
background:
linear-gradient(165deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.12) 100%),
#0b8eb8;
box-shadow: 0 12px 24px rgba(11, 142, 184, .28);
transition: transform .18s ease, box-shadow .18s ease;
}
.ig-cards .page-card:nth-child(1) {
background:
linear-gradient(165deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.12) 100%),
#0b8eb8;
box-shadow: 0 16px 34px rgba(11, 142, 184, .32);
}
.ig-cards .page-card:nth-child(2) {
background:
linear-gradient(165deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.18) 100%),
#2b2b2b;
box-shadow: 0 16px 34px rgba(17, 24, 39, .28);
}
.ig-cards .page-card:nth-child(3) {
background:
linear-gradient(165deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.12) 100%),
#c94a3c;
box-shadow: 0 16px 34px rgba(201, 74, 60, .34);
}
.ig-cards .page-card:nth-child(4) {
background:
linear-gradient(165deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.1) 100%),
#3d5fe8;
box-shadow: 0 16px 34px rgba(61, 95, 232, .34);
}
.ig-cards .page-card:nth-child(5) {
background:
linear-gradient(165deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.08) 100%),
#ff8a1f;
box-shadow: 0 16px 34px rgba(255, 138, 31, .34);
}
.ig-cards .page-card:nth-child(6) {
background:
linear-gradient(165deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.12) 100%),
#b82a68;
box-shadow: 0 16px 34px rgba(184, 42, 104, .32);
}
.ig-cards .page-card::after { content: none; }
.ig-cards .page-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 28px rgba(17, 24, 39, .14);
}
.ig-cards .ig-ico {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 auto;
color: #fff;
background: rgba(255,255,255,.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50%;
box-shadow: 0 6px 12px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.4);
}
.ig-cards .ig-ico svg { width: 1.1rem; height: 1.1rem; display: block; }
.inner-page .ig-cards .page-card h3 {
position: static;
color: #fff;
margin: 0.55rem 0 0.2rem;
padding: 0;
font-size: 1.05rem;
line-height: 1.4;
text-align: center;
}
.ig-cards .page-card h3::after { content: none; }
.ig-cards .page-card p {
position: static;
margin-top: 0;
color: rgba(255,255,255,.9);
line-height: 1.55;
font-size: 0.83rem;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ig-packages { margin-top: 2.6rem; }
.ig-packages-head { text-align: center; margin-bottom: 1.45rem; }
.ig-packages-head h2 {
margin: 0 0 0.4rem;
color: #111827;
font-size: 1.4rem;
font-weight: 800;
}
.ig-packages-head h2 span { color: #ff6b00; }
.ig-packages-head p { margin: 0; color: #4b5563; line-height: 1.8; }
.ig-packages-head p + p { margin-top: 0.2rem; font-size: 0.9rem; color: #6b7280; }
.ig-plans {
display: grid;
gap: 1.45rem;
padding: 0.2rem 0.1rem 0.35rem;
align-items: stretch;
}
@media (min-width: 900px) { .ig-plans { grid-template-columns: repeat(3, 1fr); } }
.ig-plan {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
text-align: center;
background: #fff;
border: 1.5px solid #ff8a1f;
border-radius: 1.45rem;
padding: 1.45rem 1.15rem 1.25rem;
box-shadow: 0 16px 38px rgba(17, 24, 39, .07);
transition: transform .18s ease, box-shadow .18s ease;
}
.ig-plan::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 5px;
background: #ff8a1f;
}
.ig-plan.is-boom {
border-color: #0b8eb8;
}
.ig-plan.is-boom::before { background: #0b8eb8; }
.ig-plan.is-reco {
border-color: #ff6b00;
background: linear-gradient(180deg, #fff7f0 0%, #fff 46%);
box-shadow: 0 20px 44px rgba(255, 107, 0, .16);
}
.ig-plan.is-reco::before { background: #ff6b00; }
.ig-plan:hover {
transform: translateY(-6px);
box-shadow: 0 22px 44px rgba(17, 24, 39, .1);
}
.ig-plan.is-reco:hover { box-shadow: 0 24px 48px rgba(255, 107, 0, .18); }
.ig-plan-badge {
position: static;
display: inline-flex;
margin: 0 0 0.5rem;
transform: none;
background: #ff6b00;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
padding: 0.28rem 0.8rem;
border-radius: 999px;
white-space: nowrap;
}
.ig-plan-kicker {
margin: 0 0 0.18rem;
color: #ff6b00;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.ig-plan h3 {
margin: 0 0 0.2rem;
color: #111827;
font-size: 1.18rem;
font-weight: 800;
}
.ig-plan-price {
margin: 0 0 0.7rem;
color: #ff6b00;
font-size: 1.38rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.ig-plan-price small {
display: inline-block;
margin-right: 0.2rem;
color: #6b7280;
font-size: 0.76rem;
font-weight: 600;
}
.ig-plan ul {
list-style: none;
margin: 0 0 auto;
padding: 0;
width: 100%;
text-align: center;
flex: 1;
}
.ig-plan li {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 0 0 0.38rem;
padding: 0;
color: #374151;
font-size: 0.88rem;
line-height: 1.65;
}
.ig-plan li::before {
content: "";
position: static;
width: 0.42rem;
height: 0.42rem;
flex: 0 0 auto;
border-radius: 50%;
background: #ff6b00;
}
.ig-plan-foot {
margin: 0.75rem 0 0;
padding-top: 0.7rem;
border-top: 1px solid #f0e9e1;
color: #6b7280;
font-size: 0.82rem;
line-height: 1.7;
}
.ig-addons {
margin-top: 1.35rem;
padding: 1.35rem 1.15rem 1.2rem;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.45rem;
box-shadow: 0 12px 30px rgba(17, 24, 39, .05);
}
.ig-addons h3 {
margin: 0 0 1rem;
color: #111827;
font-size: 1.08rem;
font-weight: 800;
text-align: center;
}
.ig-addon-grid {
display: grid;
gap: 0.9rem;
}
@media (min-width: 760px) { .ig-addon-grid { grid-template-columns: 1fr 1fr; } }
.ig-addon {
display: block;
padding: 1.05rem 1rem 1rem;
background: #fffaf6;
border: 1px solid #f3e6d8;
border-radius: 1.1rem;
text-align: center;
}
.ig-addon h4 {
margin: 0.55rem 0 0.2rem;
color: #111827;
font-size: 0.95rem;
font-weight: 800;
}
.ig-addon p { margin: 0; color: #6b7280; font-size: 0.85rem; line-height: 1.7; }
.ig-addon p.hl { margin-top: 0.28rem; color: #e85f00; font-weight: 700; }
.ig-addon-tag {
display: inline-flex;
background: #fff4ec;
color: #e85f00;
font-size: 0.72rem;
font-weight: 700;
padding: 0.28rem 0.7rem;
border-radius: 999px;
white-space: nowrap;
}
.ig-pkg-cta {
position: relative;
overflow: hidden;
display: grid;
gap: 1.15rem;
align-items: center;
margin-top: 1.35rem;
padding: 1.55rem 1.35rem 1.45rem;
text-align: center;
background:
radial-gradient(18rem 10rem at 92% -30%, rgba(255, 107, 0, .16), transparent 62%),
#fff;
border: 1px solid #efe8df;
border-radius: 1.45rem;
box-shadow: 0 14px 34px rgba(17, 24, 39, .06);
}
.ig-pkg-cta::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
@media (min-width: 800px) {
.ig-pkg-cta {
grid-template-columns: 1fr auto;
text-align: right;
padding: 1.7rem 1.7rem 1.55rem;
}
}
.ig-pkg-cta h2 {
margin: 0 0 0.3rem;
color: #111827;
font-size: 1.12rem;
font-weight: 800;
}
.ig-pkg-cta p {
margin: 0;
color: #6b7280;
line-height: 1.7;
}
.ig-pkg-phones {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.55rem;
}
@media (min-width: 800px) { .ig-pkg-phones { justify-content: flex-end; } }
.ig-pkg-phones a {
display: inline-flex;
align-items: center;
background: transparent;
color: #111827;
border: 1.5px solid #111827;
font-weight: 700;
font-size: 0.92rem;
padding: 0.52rem 1.05rem;
border-radius: 999px;
direction: ltr;
unicode-bidi: isolate;
}
.ig-pkg-phones a:hover { background: rgba(17, 24, 39, .06); color: #111827; }
.ig-pkg-phones a.is-solid {
background: #ff6b00;
border-color: #ff6b00;
color: #fff;
box-shadow: 0 8px 18px rgba(255, 107, 0, .25);
}
.ig-pkg-phones a.is-solid:hover { background: #e85f00; border-color: #e85f00; color: #fff; }
.seo-packages { margin-top: 0.4rem; }
.seo-svcs {
display: grid;
gap: 1.25rem;
margin-bottom: 0.4rem;
padding: 0.35rem 0.1rem 0.2rem;
}
@media (min-width: 700px) { .seo-svcs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .seo-svcs { grid-template-columns: repeat(4, 1fr); } }
.seo-svc {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
text-align: center;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.35rem;
padding: 1.25rem 0.95rem 1.15rem;
box-shadow: 0 14px 32px rgba(17, 24, 39, .06);
transition: transform .18s ease, box-shadow .18s ease;
}
.seo-svc::before {
content: "";
position: absolute;
top: 0; right: 0; left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b00, #ffb27a);
}
.seo-svc:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(17, 24, 39, .1);
}
.seo-svc-ico {
display: grid;
place-items: center;
width: 2.2rem;
height: 2.2rem;
color: #e85f00;
background: #fff4ec;
border-radius: 50%;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.seo-svc-ico svg { width: 1.05rem; height: 1.05rem; display: block; }
.seo-svc h3 {
margin: 0.55rem 0 0.28rem;
color: #111827;
font-size: 0.98rem;
font-weight: 800;
line-height: 1.3;
}
.seo-svc h3 span {
display: block;
margin-top: 0.1rem;
color: #9ca3af;
font-size: 0.7rem;
font-weight: 600;
}
.seo-svc ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.seo-svc li {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin: 0 0 0.28rem;
padding: 0;
color: #4b5563;
font-size: 0.82rem;
line-height: 1.6;
}
.seo-svc li::before {
content: "";
position: static;
width: 0.35rem;
height: 0.35rem;
flex: 0 0 auto;
border-radius: 50%;
background: #ff6b00;
}
.seo-trust {
display: grid;
gap: 0.7rem;
margin-top: 1.2rem;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.35rem;
padding: 1rem 1.1rem;
box-shadow: 0 12px 28px rgba(17, 24, 39, .05);
}
@media (min-width: 800px) { .seo-trust { grid-template-columns: repeat(3, 1fr); } }
.seo-trust p {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0;
color: #111827;
font-size: 0.88rem;
font-weight: 700;
text-align: center;
}
.seo-trust p::before {
content: "";
width: 0.38rem;
height: 0.68rem;
flex: 0 0 auto;
margin-top: -0.22rem;
border-right: 2.2px solid #e85f00;
border-bottom: 2.2px solid #e85f00;
transform: rotate(45deg);
}
.page-grid { display: grid; gap: 1.1rem; }
@media (min-width: 768px) {
.page-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.page-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.page-grid.ig-cards {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
gap: 1.4rem;
overflow: visible;
padding: 1rem 0.2rem 1.35rem;
}
@media (max-width: 1099px) {
.page-grid.ig-cards {
justify-content: flex-start;
overflow-x: auto;
padding-top: 0.9rem;
padding-bottom: 1.25rem;
}
}
@media (min-width: 768px) {
.page-grid.cols-3.ig-cards {
grid-template-columns: none;
}
}
.page-card {
background: #fff;
border: 1px solid #eeeaf2;
border-radius: 1.2rem;
padding: 1.45rem 1.3rem;
box-shadow: 0 10px 28px rgba(17,24,39,.05);
}
.inner-page .page-card h2,
.inner-page .page-card h3 {
margin: 0 0 0.5rem;
color: #111827;
font-size: 1.08rem;
font-weight: 800;
}
.seo-page .page-card h3 { color: #111827; }
.page-card p, .page-card li { color: #4b5563; line-height: 1.9; }
.page-card p { margin: 0; }
.page-card p + p { margin-top: 0.85rem; }
.page-card ul { margin: 0; padding-right: 1.1rem; }
.page-split {
display: grid;
gap: 1.4rem;
align-items: center;
margin-bottom: 1.4rem;
}
@media (min-width: 900px) { .page-split { grid-template-columns: 1.1fr 0.9fr; gap: 2rem; } }
.page-split img {
width: 100%;
border-radius: 1.2rem;
box-shadow: 0 12px 32px rgba(17,24,39,.08);
background: #fff;
}
.page-split img.ig-why {
background: transparent;
box-shadow: none;
filter: drop-shadow(0 18px 28px rgba(17, 24, 39, .12));
object-fit: contain;
}
.page-copy h2 {
margin: 0 0 0.7rem;
font-size: 1.35rem;
font-weight: 800;
color: #111827;
}
.page-copy p { margin: 0 0 0.85rem; color: #4b5563; line-height: 1.95; }
.page-copy p:last-child { margin-bottom: 0; }
.about-intro {
max-width: 42rem;
margin: 0 auto 0.4rem;
text-align: center;
}
.about-intro h2 { margin-bottom: 0.9rem; }
.about-fill { direction: rtl; text-align: right; max-width: 58rem; margin: 0 auto; }
.about-fill-body { padding-top: 1.2rem; }
.about-process-head { text-align: center; margin: 0 0 1.45rem; }
.about-process-head h2 {
margin: 0.45rem 0 0;
color: #111827;
font-size: 1.35rem;
font-weight: 800;
}
.about-steps {
display: grid;
gap: 1.15rem;
margin-bottom: 1.75rem;
}
@media (min-width: 800px) { .about-steps { grid-template-columns: repeat(3, 1fr); } }
.about-steps article {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.35rem;
padding: 1.35rem 1.25rem 1.25rem;
box-shadow: 0 14px 32px rgba(17, 24, 39, .05);
transition: transform .18s ease, box-shadow .18s ease;
}
.about-steps article::before { content: none; }
.about-steps article:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(17, 24, 39, .08);
}
.about-step-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.85rem;
}
.about-step-ico {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
color: #111827;
background: #f3f0eb;
border-radius: 0.75rem;
}
.about-step-ico svg { width: 1.1rem; height: 1.1rem; display: block; }
.about-step-top > span:not(.about-step-ico) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.05rem;
height: 2.05rem;
margin: 0;
border-radius: 999px;
background: #111827;
color: #fff;
font-size: 0.72rem;
font-weight: 800;
}
.about-steps h3 {
margin: 0 0 0.28rem;
color: #111827;
font-size: 1.05rem;
font-weight: 800;
line-height: 1.4;
}
.about-steps p {
margin: 0;
color: #6b7280;
font-size: 0.9rem;
line-height: 1.85;
flex: 1;
}
.about-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
background: none;
border: 0;
box-shadow: none;
overflow: visible;
}
@media (min-width: 800px) { .about-facts { grid-template-columns: repeat(4, 1fr); } }
.about-facts article {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.35rem;
padding: 1.35rem 0.85rem 1.2rem;
box-shadow: 0 12px 28px rgba(17, 24, 39, .05);
transition: transform .18s ease, box-shadow .18s ease;
}
.about-facts article:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(17, 24, 39, .08);
}
.about-fact-ico {
display: grid;
place-items: center;
width: 2.4rem;
height: 2.4rem;
margin: 0 0 0.7rem;
color: #fff;
background: #111827;
border-radius: 0.85rem;
}
.about-fact-ico svg { width: 1.15rem; height: 1.15rem; display: block; }
.about-facts strong {
display: block;
color: #111827;
font-size: 1.42rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 0;
line-height: 1.2;
}
.about-facts strong::after {
content: "";
display: block;
width: 1.35rem;
height: 3px;
margin: 0.55rem auto 0.5rem;
background: #ff6b00;
border-radius: 99px;
}
.about-facts article > span:last-child {
color: #6b7280;
font-size: 0.82rem;
line-height: 1.5;
}
/* کارت نرم — صفحه درباره ما (مراحل + آمار) */
.about-steps.about-steps--soft {
gap: 0.9rem;
margin-bottom: 1.35rem;
}
.about-facts.about-facts--soft {
gap: 0.85rem;
}
.about-steps--soft article,
.about-facts--soft article {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(18px) saturate(170%);
-webkit-backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1.15rem;
padding: 1.15rem 1rem 1.05rem;
box-shadow:
0 10px 22px rgba(120, 132, 175, 0.1),
0 2px 5px rgba(120, 132, 175, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.about-steps--soft article,
.about-facts--soft article {
background: rgba(255, 255, 255, 0.94);
}
}
.about-steps--soft article::before,
.about-facts--soft article::before {
content: "";
position: absolute;
top: 0;
right: auto;
left: 50%;
bottom: auto;
width: 4.5rem;
height: 8px;
transform: translateX(-50%);
border-radius: 0 0 999px 999px;
}
.about-steps--soft article:hover,
.about-facts--soft article:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.74);
border-color: rgba(255, 255, 255, 0.72);
box-shadow:
0 14px 26px rgba(120, 132, 175, 0.14),
0 3px 7px rgba(120, 132, 175, 0.07);
}
.about-steps--soft .about-step-ico {
width: 2.75rem;
height: 2.75rem;
border-radius: 0.8rem;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: none;
}
.about-facts--soft .about-step-ico {
width: 2.45rem;
height: 2.45rem;
border-radius: 0.72rem;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: none;
}
.about-steps--soft .about-step-ico svg {
width: 1.35rem;
height: 1.35rem;
}
.about-facts--soft .about-step-ico svg {
width: 1.2rem;
height: 1.2rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.about-steps--soft .about-step-ico,
.about-facts--soft .about-step-ico {
background: rgba(243, 240, 235, 0.95);
}
}
.about-steps--soft article:nth-child(1)::before {
background: linear-gradient(90deg, #93c5fd, #2563eb);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}
.about-steps--soft article:nth-child(2)::before {
background: linear-gradient(90deg, #fdba74, #ea580c);
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.28);
}
.about-steps--soft article:nth-child(3)::before {
background: linear-gradient(90deg, #6b7280, #111827);
box-shadow: 0 2px 6px rgba(17, 24, 39, 0.35);
}
.about-steps--soft .about-step-top {
justify-content: center;
margin-bottom: 0.75rem;
width: 100%;
}
.about-facts--soft .about-step-top {
justify-content: center;
margin-bottom: 0.7rem;
width: 100%;
}
.about-steps--soft h3 {
margin: 0 0 0.25rem;
color: #111827;
font-size: 0.98rem;
font-weight: 800;
line-height: 1.4;
}
.about-steps--soft p {
margin: 0;
color: #6b7280;
font-size: 0.84rem;
line-height: 1.7;
}
.about-facts--soft h3 {
margin: 0 0 0.3rem;
color: #111827;
font-size: 1.12rem;
font-weight: 800;
line-height: 1.35;
}
.about-facts--soft p {
margin: 0;
color: #6b7280;
font-size: 0.92rem;
line-height: 1.65;
}
.about-facts--soft article:nth-child(1)::before {
background: linear-gradient(90deg, #c4b5fd, #7c3aed);
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.28);
}
.about-facts--soft article:nth-child(2)::before {
background: linear-gradient(90deg, #fcd34d, #d97706);
box-shadow: 0 2px 6px rgba(217, 119, 6, 0.28);
}
.about-facts--soft article:nth-child(3)::before {
background: linear-gradient(90deg, #6ee7b7, #059669);
box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28);
}
.about-facts--soft article:nth-child(4)::before {
background: linear-gradient(90deg, #fda4af, #e11d48);
box-shadow: 0 2px 6px rgba(225, 29, 72, 0.28);
}
/* درباره ما — داستان شرکت */
.about-story {
padding: 2.2rem 1rem 0.4rem;
background: #faf6f1;
}
.about-story-grid {
display: grid;
gap: 1.6rem;
align-items: start;
max-width: 58rem;
margin: 0 auto;
}
@media (min-width: 900px) {
.about-story-grid {
grid-template-columns: 1.35fr 0.85fr;
gap: 2rem;
}
}
.about-story-copy h2 {
margin: 0 0 0.9rem;
color: #111827;
font-size: 1.45rem;
font-weight: 800;
line-height: 1.45;
}
.about-story-copy p {
margin: 0 0 0.85rem;
color: #4b5563;
line-height: 1.95;
font-size: 0.94rem;
}
.about-story-copy p:last-child { margin-bottom: 0; }
.about-story-meta {
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(18px) saturate(170%);
-webkit-backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1.15rem;
padding: 1.25rem 1.15rem;
box-shadow:
0 10px 22px rgba(120, 132, 175, 0.1),
0 2px 5px rgba(120, 132, 175, 0.05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.about-story-meta { background: rgba(255, 255, 255, 0.94); }
}
.about-story-brand {
margin: 0 0 0.35rem;
color: #111827;
font-size: 1.05rem;
font-weight: 800;
}
.about-story-sub {
margin: 0 0 1rem;
color: #6b7280;
font-size: 0.86rem;
line-height: 1.7;
}
.about-story-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.about-story-tags li {
padding: 0.32rem 0.7rem;
border-radius: 999px;
background: rgba(255, 107, 0, 0.1);
color: #c2410c;
font-size: 0.78rem;
font-weight: 700;
}
.about-section-pad {
padding-top: 2rem;
padding-bottom: 2rem;
}
.about-features {
display: grid;
gap: 0.9rem;
max-width: 58rem;
margin: 0 auto;
}
@media (min-width: 800px) {
.about-features { grid-template-columns: repeat(3, 1fr); }
}
.about-features--soft article {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(18px) saturate(170%);
-webkit-backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1.15rem;
padding: 1.15rem 1rem 1.05rem;
box-shadow:
0 10px 22px rgba(120, 132, 175, 0.1),
0 2px 5px rgba(120, 132, 175, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-features--soft article::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 4.5rem;
height: 8px;
transform: translateX(-50%);
border-radius: 0 0 999px 999px;
}
.about-features--soft article:nth-child(1)::before {
background: linear-gradient(90deg, #93c5fd, #2563eb);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}
.about-features--soft article:nth-child(2)::before {
background: linear-gradient(90deg, #6ee7b7, #059669);
box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28);
}
.about-features--soft article:nth-child(3)::before {
background: linear-gradient(90deg, #fdba74, #ea580c);
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.28);
}
.about-features--soft article:hover {
transform: translateY(-2px);
box-shadow:
0 14px 26px rgba(120, 132, 175, 0.14),
0 3px 7px rgba(120, 132, 175, 0.07);
}
.about-features--soft .about-step-top {
justify-content: center;
margin-bottom: 0.65rem;
width: 100%;
}
.about-features--soft .about-step-ico {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.65rem;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.55);
}
.about-features--soft .about-step-ico svg {
width: 1.1rem;
height: 1.1rem;
}
.about-features--soft h3 {
margin: 0 0 0.25rem;
color: #111827;
font-size: 0.98rem;
font-weight: 800;
line-height: 1.4;
}
.about-features--soft p {
margin: 0;
color: #6b7280;
font-size: 0.84rem;
line-height: 1.7;
}
.about-timeline {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 46rem;
position: relative;
}
.about-timeline::before {
content: "";
position: absolute;
top: 0.5rem;
bottom: 0.5rem;
right: 0.72rem;
width: 2px;
background: linear-gradient(180deg, rgba(255, 107, 0, 0.15), rgba(255, 107, 0, 0.55), rgba(255, 107, 0, 0.15));
border-radius: 99px;
}
.about-timeline li {
position: relative;
display: grid;
grid-template-columns: 3.5rem 1fr;
gap: 0.85rem;
align-items: start;
padding: 0 0 1.15rem;
}
.about-timeline li:last-child { padding-bottom: 0; }
.about-timeline-year {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 2.45rem;
height: 2.45rem;
margin-top: 0.15rem;
border-radius: 999px;
background: #ff6b00;
color: #fff;
font-size: 0.72rem;
font-weight: 800;
box-shadow: 0 6px 14px rgba(255, 107, 0, 0.28);
}
.about-timeline-card {
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(18px) saturate(170%);
-webkit-backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1rem;
padding: 0.95rem 1rem;
box-shadow: 0 8px 20px rgba(120, 132, 175, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.about-features--soft article,
.about-timeline-card { background: rgba(255, 255, 255, 0.94); }
}
.about-timeline-card h3 {
margin: 0 0 0.25rem;
color: #111827;
font-size: 0.95rem;
font-weight: 800;
}
.about-timeline-card p {
margin: 0;
color: #6b7280;
font-size: 0.84rem;
line-height: 1.75;
}
.page-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.4rem;
}
@media (min-width: 800px) { .page-stats { grid-template-columns: repeat(4, 1fr); } }
.page-stat {
background: #111827;
color: #fff;
text-align: center;
border-radius: 1.15rem;
padding: 1.2rem 0.8rem;
}
.page-stat strong {
display: block;
color: #ff6b00;
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 0.25rem;
}
.page-stat span { font-size: 0.82rem; color: #d1d5db; }
.page-cta {
background: #111827;
color: #fff;
text-align: center;
border-radius: 1.2rem;
padding: 2rem 1.2rem;
margin-top: 1.6rem;
}
.page-cta h2 { margin: 0 0 0.45rem; color: #fff; font-size: 1.25rem; font-weight: 800; }
.page-cta p { margin: 0 0 1rem; color: #d1d5db; line-height: 1.85; }
.page-phone {
display: block;
color: #ff6b00;
font-size: 1.7rem;
font-weight: 800;
text-decoration: none;
letter-spacing: .03em;
margin: 0.2rem 0 0.7rem;
}
.inner-page .blog-card {
background: #fff;
border: 1px solid #eeeaf2;
border-radius: 1.2rem;
padding: 1.45rem 1.3rem;
box-shadow: 0 10px 28px rgba(17,24,39,.05);
}
.blog-page-body { max-width: 1100px; }
.blog-filters {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.blog-filter-btn {
border: 1px solid #eadfd4;
background: #fff;
color: #4b5563;
border-radius: 999px;
padding: 0.38rem 0.9rem;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-filter-btn:hover,
.blog-filter-btn.is-active {
background: #ff6b00;
border-color: #ff6b00;
color: #fff;
}
.blog-grid--media {
display: grid;
gap: 1.25rem;
margin-bottom: 2rem;
}
@media (min-width: 640px) { .blog-grid--media { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-grid--media { grid-template-columns: repeat(3, 1fr); } }
.blog-card--media {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
text-decoration: none;
background: #fff;
border: 1px solid #efe8df;
border-radius: 1.15rem;
box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card--media:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(17, 24, 39, 0.1);
}
.blog-card-cover {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f3f0eb;
}
.blog-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.blog-card--media:hover .blog-card-cover img {
transform: scale(1.04);
}
.blog-card-cover .blog-card-cat {
position: absolute;
top: 0.65rem;
right: 0.65rem;
margin: 0;
padding: 0.28rem 0.65rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #c2410c;
font-size: 0.72rem;
font-weight: 700;
box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
}
.blog-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem 1.05rem 1.05rem;
text-align: right;
}
.blog-card--media h3 {
margin: 0 0 0.45rem;
color: #111827;
font-size: 1.02rem;
font-weight: 800;
line-height: 1.45;
}
.blog-card--media p {
margin: 0 0 0.85rem;
color: #6b7280;
font-size: 0.84rem;
line-height: 1.7;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.15rem;
}
.blog-card-foot time {
color: #9ca3af;
font-size: 0.75rem;
font-weight: 600;
}
.blog-card--media .blog-card-more {
color: #ff6b00;
font-size: 0.8rem;
font-weight: 700;
}
.blog-card--media .blog-card-more::after { content: " \2190"; }
.article-wrap { max-width: 760px; margin: 0 auto; }
.article-wrap .page-card p { margin-bottom: 0.9rem; }
.article-wrap .page-card p:last-child { margin-bottom: 0; }
.page-related { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.page-related a { color: #ff6b00; font-weight: 700; text-decoration: none; font-size: 0.92rem; }
@media (max-width: 640px) {
.page-banner h1 { font-size: 1.5rem; }
.page-phone { font-size: 1.4rem; }
}
body.cv-page { background: #faf6f1; }
.cv-hero {
position: relative;
overflow: hidden;
padding: 7.3rem 1rem 2.2rem;
background:
radial-gradient(circle at 12% 18%, rgba(255,107,0,.16), transparent 34%),
radial-gradient(circle at 88% 8%, rgba(255,107,0,.1), transparent 28%),
#faf6f1;
}
.cv-hero-grid {
display: grid;
gap: 2rem;
align-items: center;
}
@media (min-width: 900px) { .cv-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 2.4rem; } }
.cv-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.85rem;
padding: 0.28rem 0.8rem;
border: 1px solid rgba(255,107,0,.35);
border-radius: 999px;
color: #111827;
font-size: 0.8rem;
font-weight: 700;
background: #fff;
}
.cv-eyebrow::before {
content: "";
width: 0.45rem; height: 0.45rem;
border-radius: 50%;
background: #ff6b00;
}
.cv-hero h1 {
margin: 0 0 0.55rem;
font-size: 2.35rem;
font-weight: 800;
color: #111827;
line-height: 1.25;
}
.cv-role {
margin: 0 0 0.85rem;
color: #111827;
font-weight: 700;
font-size: 1.02rem;
line-height: 1.8;
}
.cv-summary { margin: 0; color: #4b5563; line-height: 1.95; max-width: 40rem; }
.cv-hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.3rem; }
.cv-page .cv-hero-actions .site-btn.ghost {
color: #111827;
border-color: #111827;
}
.cv-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-bottom: 1rem; }
.cv-tools button, .cv-tools a {
background: #fff; color: #374151; border: 1px solid #eadfd4;
border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.8rem;
font-weight: 700; cursor: pointer; font-family: inherit;
}
.cv-photo-card { position: relative; max-width: 22rem; margin: 0 auto; }
.cv-photo-frame {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
}
.cv-photo-frame::before {
content: "";
position: absolute;
left: 50%;
bottom: -0.6rem;
transform: translateX(-50%);
width: 78%;
height: 1.6rem;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(122, 51, 0, .22), transparent 70%);
}
.cv-photo-frame img {
position: relative;
display: block;
width: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 28px rgba(122, 51, 0, .22));
}
.cv-photo-badge {
position: absolute;
left: -0.4rem; bottom: 2rem;
width: 4.9rem; height: 4.9rem;
border-radius: 50%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
color: #5b3a00;
background: radial-gradient(circle at 36% 28%, #ffedb0 0%, #f6cd67 52%, #dfa428 100%);
box-shadow:
inset 0 2px 5px rgba(255, 255, 255, .65),
inset 0 -4px 9px rgba(130, 84, 4, .38),
0 0 0 2px #fff,
0 10px 22px rgba(150, 101, 10, .28);
}
.cv-photo-badge strong {
font-size: 1.25rem; font-weight: 800; line-height: 1.1;
text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.cv-photo-badge span {
font-size: 0.62rem; font-weight: 700; letter-spacing: .02em;
}
.cv-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
margin-top: 2rem;
}
@media (min-width: 900px) { .cv-stats { grid-template-columns: repeat(4, 1fr); } }
.cv-stat {
background: #fff;
border-radius: 1.1rem;
padding: 1.05rem 0.9rem;
box-shadow: 0 10px 28px rgba(17,24,39,.05);
text-align: center;
}
.cv-stat strong { display: block; color: #111827; font-size: 1.2rem; font-weight: 800; margin-bottom: 0.25rem; }
.cv-stat span { color: #4b5563; font-size: 0.8rem; line-height: 1.6; }
.cv-subnav {
position: sticky; top: 5rem; z-index: 30;
background: transparent;
padding: 0.35rem 1rem;
pointer-events: none;
}
.cv-subnav-inner {
pointer-events: auto;
display: flex; gap: 0.1rem;
width: fit-content;
max-width: 100%;
margin: 0 auto;
overflow-x: auto;
scrollbar-width: none;
padding: 0.32rem 0.45rem;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 999px;
box-shadow: 0 10px 28px rgba(17, 24, 39, 0.1);
}
.cv-subnav-inner::-webkit-scrollbar { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.cv-subnav-inner { background: rgba(255, 255, 255, 0.95); }
}
.cv-subnav a {
white-space: nowrap; color: #4b5563; text-decoration: none;
font-size: 0.85rem; font-weight: 600;
padding: 0.4rem 0.9rem; border-radius: 999px;
transition: color .15s ease, background-color .15s ease;
}
.cv-subnav a:hover { color: #ff6b00; background: rgba(255, 107, 0, 0.12); }
.cv-subnav a.is-active {
color: #111827;
background: rgba(17, 24, 39, 0.08);
font-weight: 800;
}
.cv-section, .cv-contact { scroll-margin-top: 7.2rem; }
.cv-section { padding: 3.4rem 0; position: relative; }
.cv-section.is-white { background: #fff; }
.cv-section.is-ice { background: #f7f3ee; }
.cv-section.is-warm { background: #fff8f2; }
.cv-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.cv-kicker { color: #ff6b00; font-weight: 800; font-size: 0.82rem; margin: 0 0 0.4rem; }
.cv-section h2 { margin: 0 0 0.55rem; font-size: 1.45rem; font-weight: 800; color: #111827; line-height: 1.5; }
.cv-lead { margin: 0; color: #6b7280; line-height: 1.9; max-width: 40rem; }
.cv-index { font-size: 4.2rem; font-weight: 800; color: rgba(17,24,39,.07); line-height: 1; user-select: none; }
.cv-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
.cv-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.cv-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.cv-card, .cv-job {
background: #fff;
border: 1px solid #eeeaf2;
border-radius: 1.15rem;
padding: 1.25rem 1.2rem;
box-shadow: 0 8px 22px rgba(17,24,39,.04);
}
.cv-section.is-white .cv-card { background: #faf7f3; }
.cv-card h3, .cv-job h3 { margin: 0 0 0.4rem; color: #111827; font-size: 1.02rem; font-weight: 800; }
.cv-card p, .cv-job p, .cv-job li { margin: 0; color: #4b5563; line-height: 1.85; font-size: 0.92rem; }
.cv-card p + p, .cv-job p + p { margin-top: 0.6rem; }
.cv-job ul { margin: 0.55rem 0 0; padding-right: 1.05rem; }
.cv-meta { display: block; color: #9a4a12; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.45rem; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.cv-tags span {
background: #fff4ec; color: #9a4a12; border-radius: 999px;
padding: 0.18rem 0.55rem; font-size: 0.72rem; font-weight: 700;
}
.cv-quote {
border-inline-start: 3px solid #ff6b00;
padding-block: 0.2rem;
padding-inline-start: 1rem;
margin-top: 1.1rem;
}
.cv-quote h3 { margin: 0 0 0.35rem; color: #111827; }
.cv-contact {
background: #111827; color: #fff; text-align: center;
padding: 3.2rem 1rem;
}
.cv-contact h2 { color: #fff; margin: 0 0 0.6rem; font-size: 1.4rem; }
.cv-contact p { color: #d1d5db; max-width: 40rem; margin: 0 auto 1.2rem; line-height: 1.9; }
.cv-contact-links {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.2rem;
}
.cv-contact-links a { color: #fff; font-weight: 700; text-decoration: none; }
.cv-contact-links a:hover { color: #ff6b00; }
.bio-portrait {
width: 8.8rem; height: 8.8rem;
object-fit: contain; object-position: center bottom;
padding: 0.7rem 0.5rem 0;
border-radius: 1.15rem;
background:
radial-gradient(circle at 78% 16%, rgba(255,255,255,.6), transparent 45%),
linear-gradient(165deg, #fff1e3, #ffc994);
margin: 0 0 1rem;
box-shadow: 0 10px 24px rgba(255,107,0,.18);
}
.cv-section [id] { scroll-margin-top: 7.2rem; }
@media (max-width: 640px) {
.cv-hero h1 { font-size: 1.75rem; }
.cv-index { display: none; }
.cv-photo-badge { width: 4.1rem; height: 4.1rem; }
}
@media print {
@page { margin: 10mm; }
.site-header, .site-footer, .cv-subnav, .cv-tools, .cv-hero-actions { display: none !important; }
body.cv-page, .cv-hero, .cv-section { background: #fff !important; }
.cv-hero { padding-top: 1rem; }
.cv-photo-badge {
background: #f3cf6f !important;
color: #3d2a00 !important;
border: 1px solid #b88821;
box-shadow: none !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.cv-photo-badge strong, .cv-photo-badge span {
color: inherit !important;
text-shadow: none !important;
}
}
.fill-head { margin: 0 0 1.4rem; }
.fill-head h2 { margin: 0.35rem 0 0.5rem; font-size: 1.45rem; font-weight: 800; color: #111827; }
.fill-head p { margin: 0; color: #6b7280; line-height: 1.9; max-width: 40rem; }
.project-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .project-grid { grid-template-columns: 1fr 1fr; } }
.project-card {
background: #fff;
border: 1px solid #eeeaf2;
border-radius: 1.15rem;
padding: 1.25rem 1.2rem;
box-shadow: 0 8px 22px rgba(17,24,39,.04);
}
.project-card .cv-meta { margin-bottom: 0.5rem; }
.project-card h3 {
margin: 0 0 0.45rem;
font-size: 1.08rem;
font-weight: 800;
font-family: inherit;
color: #111827;
}
.project-card p { margin: 0; color: #4b5563; line-height: 1.9; font-size: 0.95rem; }
.client-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .client-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .client-grid { grid-template-columns: 1fr 1fr 1fr; } }
.client-card {
display: flex; align-items: center; gap: 0.8rem;
background: #fff; border: 1px solid #eeeaf2; border-radius: 1.2rem;
padding: 0.95rem 1.1rem;
box-shadow: 0 10px 28px rgba(17,24,39,.05);
}
.client-mark {
width: 2.6rem; height: 2.6rem; flex-shrink: 0;
border-radius: 0.7rem; background: #fff4ec; color: #c2410c;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.78rem;
font-family: inherit;
}
.client-card strong {
display: block;
color: #111827;
font-size: 1.08rem;
font-weight: 800;
font-family: inherit;
line-height: 1.5;
}
.client-card small { color: #6b7280; font-size: 0.82rem; font-family: inherit; }
.partner-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .partner-grid { grid-template-columns: 1fr 1fr; } }
.partner-card {
background: #fff;
border: 1px solid #eeeaf2;
border-radius: 1.2rem;
padding: 1.45rem 1.3rem;
box-shadow: 0 10px 28px rgba(17,24,39,.05);
}
.inner-page .partner-card h3,
.partner-card h3 {
margin: 0 0 0.5rem;
font-size: 1.08rem;
font-weight: 800;
font-family: inherit;
color: #111827;
}
.partner-card p {
margin: 0;
color: #4b5563;
font-size: 0.95rem;
line-height: 1.9;
font-family: inherit;
}
.tech-panel { background: #fff; border: 1px solid #eeeaf2; border-radius: 1.2rem; padding: 1.45rem 1.3rem; margin-top: 1rem; box-shadow: 0 10px 28px rgba(17,24,39,.05); }
.tech-panel h3 {
margin: 0 0 1rem;
font-size: 1.08rem;
font-weight: 800;
font-family: inherit;
color: #111827;
}
.tech-row { display: grid; gap: 0.25rem; margin-bottom: 0.85rem; }
.tech-row:last-child { margin-bottom: 0; }
.tech-row strong { color: #9a4a12; font-size: 0.82rem; }
.tech-row p { margin: 0; color: #4b5563; font-size: 0.9rem; line-height: 1.75; }