/* =========================================
RESET
========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Vazirmatn",sans-serif;
}

body{

display:flex;

justify-content:center;

background:
linear-gradient(
180deg,
#edf4fb,
#f8fafc
);

min-height:100vh;

color:#1e293b;

}

/* =========================================
APP
========================================= */

.mobile-app{

width:100%;

max-width:530px;

background:#fff;

min-height:100vh;

overflow:hidden;

position:relative;

box-shadow:

0 20px 60px rgba(15,23,42,.12);

}

/* =========================================
HEADER
========================================= */

.page-header{

height:135px;

padding:24px;

display:flex;

align-items:flex-start;

gap:18px;

position:relative;

overflow:hidden;

background:

linear-gradient(
135deg,
#1e293b,
#334155
);

color:#fff;

}

.page-header::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:

rgba(255,255,255,.05);

right:-70px;

top:-120px;

animation:rotateShape 15s linear infinite;

}

.page-header::after{

content:"";

position:absolute;

width:130px;

height:130px;

border-radius:50%;

background:

rgba(249,115,22,.18);

left:-45px;

bottom:-60px;

filter:blur(10px);

}

.back-btn{

width:48px;

height:48px;

border:none;

border-radius:18px;

background:

rgba(255,255,255,.12);

color:#fff;

font-size:22px;

cursor:pointer;

backdrop-filter:blur(15px);

transition:.35s;

z-index:2;

}

.back-btn:hover{

transform:

translateY(-3px)
scale(1.05);

background:

rgba(255,255,255,.18);

}

.page-header h1{

font-size:24px;

font-weight:800;

margin-bottom:6px;

position:relative;

z-index:2;

}

.page-header p{

font-size:14px;

opacity:.85;

position:relative;

z-index:2;

}

/* =========================================
HERO
========================================= */

.hero-card{

margin:-38px 18px 20px;

background:#fff;

border-radius:28px;

padding:22px;

display:flex;

align-items:center;

gap:18px;

position:relative;

z-index:10;

border:1px solid #eef2f7;

box-shadow:

0 15px 40px rgba(15,23,42,.08);

animation:fadeUp .7s;

}

.hero-icon{

width:72px;

height:72px;

border-radius:24px;

background:

linear-gradient(
135deg,
#fb923c,
#f97316
);

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

flex-shrink:0;

box-shadow:

0 12px 28px rgba(249,115,22,.35);

animation:float 3s ease-in-out infinite;

}

.hero-content h2{

font-size:20px;

font-weight:800;

margin-bottom:8px;

}

.hero-content p{

font-size:14px;

line-height:1.8;

color:#64748b;

}

/* =========================================
TIP
========================================= */

.tips-box{

margin:0 18px 22px;

display:flex;

gap:16px;

align-items:flex-start;

padding:18px;

border-radius:24px;

background:

linear-gradient(
135deg,
#fff7ed,
#fffbeb
);

border:1px solid #fed7aa;

animation:fadeUp .9s;

}

.tips-icon{

width:56px;

height:56px;

border-radius:18px;

background:

linear-gradient(
135deg,
#fb923c,
#f97316
);

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

color:#fff;

flex-shrink:0;

box-shadow:

0 10px 25px rgba(249,115,22,.3);

}

.tips-box h3{

font-size:17px;

margin-bottom:6px;

}

.tips-box p{

font-size:13px;

line-height:1.8;

color:#64748b;

}

/* =========================================
LIST
========================================= */

.numbers-list{

padding:0 18px;

display:flex;

flex-direction:column;

gap:18px;

}

/* =========================================
CARD
========================================= */

.number-card{

background:#fff;

border-radius:24px;

padding:18px;

display:flex;

align-items:center;

gap:16px;

position:relative;

overflow:hidden;

transition:.35s;

border:1px solid #eef2f7;

box-shadow:

0 10px 30px rgba(15,23,42,.06);

animation:fadeUp 1s;

}

.number-card:hover{

transform:

translateY(-8px)
scale(1.02);

box-shadow:

0 18px 40px rgba(15,23,42,.12);

}

.number-card::before{

content:"";

position:absolute;

right:0;

top:0;

width:6px;

height:100%;

border-radius:20px;

}

.number-card:nth-child(1)::before{

background:#16a34a;

}

.number-card:nth-child(2)::before{

background:#2563eb;

}

.number-card:nth-child(3)::before{

background:#ea580c;

}

.number-card:nth-child(4)::before{

background:#db2777;

}

/* =========================================
ICON COLORS
========================================= */

.number-card:nth-child(1) .number-icon{

background:#dcfce7;

color:#16a34a;

}

.number-card:nth-child(2) .number-icon{

background:#dbeafe;

color:#2563eb;

}

.number-card:nth-child(3) .number-icon{

background:#ffedd5;

color:#ea580c;

}

.number-card:nth-child(4) .number-icon{

background:#fce7f3;

color:#db2777;

}

.number-icon{

width:64px;

height:64px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

flex-shrink:0;

transition:.35s;

}

.number-card:hover .number-icon{

transform:

rotate(-8deg)
scale(1.1);

}

.number-info{

flex:1;

}

.number-info h3{

font-size:17px;

font-weight:700;

margin-bottom:6px;

}

.number-info span{

font-size:21px;

font-weight:800;

letter-spacing:.5px;

color:#0f172a;

}

/* =========================================
CALL BUTTON
========================================= */

.call-btn{

width:56px;

height:56px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

position:relative;

overflow:hidden;

background:

linear-gradient(
135deg,
#22c55e,
#16a34a
);

color:#fff;

font-size:22px;

box-shadow:

0 10px 25px rgba(34,197,94,.35);

transition:.35s;

}

.call-btn:hover{

transform:

translateY(-4px)
scale(1.08);

box-shadow:

0 18px 35px rgba(34,197,94,.45);

}

.call-btn:active{

transform:scale(.95);

}

/* =========================================
FOOTER
========================================= */

.footer-card{

margin:26px 18px 35px;

padding:22px;

border-radius:28px;

display:flex;

gap:18px;

align-items:flex-start;

background:

linear-gradient(
135deg,
#1e293b,
#475569
);

color:#fff;

box-shadow:

0 20px 40px rgba(15,23,42,.18);

animation:fadeUp 1.2s;

}

.footer-icon{

width:62px;

height:62px;

border-radius:22px;

background:

rgba(255,255,255,.12);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

flex-shrink:0;

backdrop-filter:blur(10px);

}

.footer-card h3{

font-size:18px;

margin-bottom:8px;

font-weight:800;

}

.footer-card p{

font-size:13px;

line-height:1.9;

opacity:.92;

}

/* =========================================
SCROLLBAR
========================================= */

::-webkit-scrollbar{

width:6px;

}

::-webkit-scrollbar-thumb{

background:#cbd5e1;

border-radius:50px;

}

/* =========================================
ANIMATIONS
========================================= */

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(35px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@keyframes rotateShape{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

/* =========================================
DESKTOP
========================================= */

@media(min-width:768px){

body{

padding:28px;

background:

linear-gradient(
180deg,
#dbe7f1,
#edf3f8
);

}

.mobile-app{

border-radius:34px;

overflow:hidden;

}

}