/*==================================================
TERMS OF USE
Premium Design System
==================================================*/

:root{
--primary:#2563eb;
--primary-dark:#1d4ed8;
--background:#f5f7fb;
--card:#fff;
--border:#e5e7eb;
--text:#111827;
--muted:#6b7280;
--radius:18px;
--shadow:0 8px 24px rgba(15,23,42,.06);
--transition:.25s;
}

body{
background:var(--background);
font-family:'Inter',sans-serif;
color:var(--text);
}

/*==================================================
PAGE
==================================================*/

.terms-page{
padding:32px 0 60px;
}

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

.terms-hero{
display:flex;
align-items:center;
gap:24px;
padding:32px;
background:#fff;
border:1px solid var(--border);
border-radius:24px;
box-shadow:var(--shadow);
margin-bottom:26px;
}

.terms-hero-icon{
width:90px;
height:90px;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
border-radius:50%;
background:#edf5ff;
flex-shrink:0;
}

.terms-badge{
display:inline-flex;
padding:5px 12px;
border-radius:999px;
background:#eef4ff;
color:var(--primary);
font-size:12px;
font-weight:700;
margin-bottom:12px;
}

.terms-hero h1{
margin:0;
font-size:34px;
font-weight:800;
}

.terms-last-updated{
margin:12px 0;
font-size:14px;
color:var(--muted);
}

.terms-introduction{
margin:0 0 12px;
font-size:15px;
line-height:1.8;
color:#374151;
max-width:850px;
}

.terms-introduction:last-child{
margin-bottom:0;
}

/*==================================================
CONTENT
==================================================*/

.terms-content{
display:flex;
flex-direction:column;
gap:22px;
}

.terms-section{
background:#fff;
border:1px solid var(--border);
border-radius:20px;
padding:24px;
box-shadow:var(--shadow);
animation:fadeUp .35s ease;
}

.terms-section h2{
font-size:24px;
font-weight:800;
margin-bottom:14px;
}

.terms-section>p{
margin-bottom:18px;
line-height:1.8;
color:var(--muted);
}

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

.terms-card{
background:#fafcff;
border:1px solid #e7eefc;
border-radius:16px;
padding:18px;
margin-bottom:18px;
transition:var(--transition);
}

.terms-card:last-child{
margin-bottom:0;
}

.terms-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.terms-card h3{
margin:0 0 14px;
font-size:18px;
font-weight:700;
}

.terms-card p:last-child{
margin-bottom:0;
}

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

.terms-list{
margin:0;
padding-left:20px;
display:grid;
gap:10px;
}

.terms-list li{
line-height:1.7;
color:#374151;
}

/*==================================================
NOTE
==================================================*/

.terms-note{
margin-top:18px;
padding:16px 18px;
background:#f8fbff;
border-left:4px solid var(--primary);
border-radius:12px;
font-size:14px;
line-height:1.8;
}

/*==================================================
CONTACT
==================================================*/

.terms-contact-card{
background:#fafcff;
border:1px solid #e7eefc;
border-radius:16px;
padding:20px;
}

.terms-contact-card h3{
margin-bottom:16px;
font-size:22px;
font-weight:700;
}

.terms-contact-card p{
margin-bottom:10px;
}

.terms-contact-card p:last-child{
margin-bottom:0;
}

.terms-contact-card a{
color:var(--primary);
text-decoration:none;
font-weight:600;
}

.terms-contact-card a:hover{
text-decoration:underline;
}

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

.terms-footer{
margin-top:34px;
padding:20px;
text-align:center;
font-size:14px;
color:var(--muted);
}

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

::-webkit-scrollbar{
width:9px;
}

::-webkit-scrollbar-track{
background:#edf2f7;
}

::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
background:#94a3b8;
}

/*==================================================
ANIMATION
==================================================*/

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.terms-hero{
flex-direction:column;
align-items:flex-start;
padding:24px;
}

.terms-hero h1{
font-size:30px;
}

}

@media(max-width:768px){

.terms-page{
padding:20px 0 40px;
}

.terms-section{
padding:18px;
}

.terms-hero{
padding:20px;
gap:18px;
}

.terms-hero-icon{
width:72px;
height:72px;
font-size:34px;
}

.terms-hero h1{
font-size:26px;
}

.terms-card{
padding:16px;
}

.terms-section h2{
font-size:22px;
}

}

@media(max-width:576px){

.terms-page{
padding:16px 0 32px;
}

.terms-hero{
padding:18px;
border-radius:18px;
}

.terms-section{
padding:16px;
border-radius:16px;
}

.terms-card{
padding:14px;
}

.terms-list{
gap:8px;
}

.terms-list li{
font-size:14px;
}

.terms-note{
padding:14px;
font-size:13px;
}

.terms-contact-card{
padding:16px;
}

}