:root{
–cara-purple:#A1247B;
–cara-orange:#F5894B;
–glass-bg:rgba(255,255,255,0.08);
–glass-border:rgba(255,255,255,0.18);
–text:#ffffff;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Tahoma, Arial, sans-serif;
color:var(–text);
min-height:100vh;
overflow-x:hidden;

background:
linear-gradient(
rgba(161,36,123,0.60),
rgba(245,137,75,0.45)
),
url(‘https://images.unsplash.com/photo-1581056771107-24ca5f033842?auto=format&fit=crop&w=1920&q=80’);

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

padding:20px;
}

.container{
width:100%;
max-width:1200px;
margin:auto;
}

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

.hero{

background:var(–glass-bg);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border:1px solid var(–glass-border);

border-radius:30px;

padding:60px 30px;

text-align:center;

box-shadow:
0 -2px 0 0 var(–cara-orange),
0 8px 32px rgba(0,0,0,0.15),
inset 0 1px 1px rgba(255,255,255,0.15);

margin-bottom:30px;
}

.hero h1{
font-size:clamp(2rem,5vw,3.5rem);
margin-bottom:15px;
}

.hero p{
max-width:850px;
margin:auto;
line-height:2;
font-size:1.1rem;
}

/* ==========================
GRID
========================== */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:22px;
}

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

.card{

background:rgba(255,255,255,0.08);

/* بلور کمتر شد */
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,0.15);

border-radius:24px;

padding:25px;

overflow:hidden;

/* خط نارنجی بسیار نازک در بالا */
box-shadow:
0 -2px 0 0 var(–cara-orange),
0 8px 24px rgba(0,0,0,0.12),
inset 0 1px 1px rgba(255,255,255,0.12);

transition:all .35s ease;
}

.card:hover{

transform:translateY(-6px);

background:rgba(255,255,255,0.11);

box-shadow:
0 -2px 0 0 var(–cara-orange),
0 12px 30px rgba(0,0,0,0.16),
inset 0 1px 1px rgba(255,255,255,0.15);
}

.card h2{

margin-bottom:15px;

padding-right:12px;

border-right:4px solid var(–cara-orange);

color:#fff;

font-size:1.3rem;
}

.card p{
line-height:2;
}

.card ul{
padding-right:20px;
}

.card li{
line-height:2;
margin-bottom:8px;
}

/* ==========================
FAQ
========================== */

.full-width{
margin-top:25px;
}

.faq-item{
margin-bottom:22px;
}

.faq-item h3{
color:#fff;
margin-bottom:8px;
}

/* ==========================
CTA
========================== */

.cta{
margin-top:25px;
text-align:center;
}

.cta-btn{

display:inline-block;

background:linear-gradient(
135deg,
var(–cara-orange),
var(–cara-purple)
);

color:#fff;

text-decoration:none;

padding:14px 32px;

border-radius:50px;

font-weight:bold;

transition:.3s ease;
}

.cta-btn:hover{
transform:translateY(-3px);
}

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

.footer{
text-align:center;
margin-top:30px;
color:rgba(255,255,255,.9);
font-size:.95rem;
}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){

body{
padding:15px;
}

.hero{
padding:40px 20px;
}

.grid{
grid-template-columns:1fr;
}

.card{
padding:20px;
}

.hero h1{
font-size:2rem;
}
}