.tos-wrap{
--ink:#0f172a;
--ink-soft:#6a7398;
--lav:#6a7eff;
--lav2:#9faeff;
--max:880px;
}
body{
margin:0;
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ink);
background:
radial-gradient(850px 280px at 50% -120px, rgba(106,126,255,.14), transparent),
linear-gradient(180deg,#f7f8ff,#ffffff);
}
.tos-wrap{
width:min(var(--max),100%);
margin:0 auto;
padding:18px 20px 44px;
overflow-wrap:anywhere;
}
.tos-hero{
border-radius:18px;
background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.40));
backdrop-filter:blur(10px) saturate(160%);
-webkit-backdrop-filter:blur(10px) saturate(160%);
border:1px solid rgba(106,126,255,.18);
box-shadow:
inset 0 1px 3px rgba(255,255,255,.7),
inset 0 -2px 6px rgba(106,126,255,.08),
0 8px 22px rgba(106,126,255,.12);
padding:20px 24px;
display:flex;
align-items:center;
gap:18px;
position:relative;
overflow:hidden;
transform:translateZ(0);
}
.tos-hero .ic{
width:50px;height:50px;
border-radius:14px;
display:grid;place-items:center;
background:linear-gradient(135deg,rgba(106,126,255,.18),rgba(255,255,255,.6));
box-shadow:inset 0 0 0 1px rgba(106,126,255,.25);
font-size:22px;
color:var(--lav);
flex:0 0 auto;
}
.tos-hero h1{
margin:0;
font-size:clamp(26px,4vw,34px);
font-weight:900;
background:linear-gradient(90deg,var(--lav),var(--lav2));
-webkit-background-clip:text;
color:transparent;
}
.tos-hero p{
margin:6px 0 0;
font-size:.95rem;
color:var(--ink-soft);
line-height:1.45;
}
.tos-card{
margin-top:26px;
background:#fff;
border-radius:16px;
border:1px solid rgba(106,126,255,.16);
box-shadow:0 6px 18px rgba(106,126,255,.05);
padding:18px 20px;
}
@media (min-width:768px){
.tos-card{padding:20px 24px;}
}
.tos-card h2{
margin:0 0 12px;
font-size:1.12rem;
font-weight:900;
color:var(--ink);
letter-spacing:-.2px;
}
.tos-card h2::after{
content:"";
display:block;
height:2px;
width:42px;
background:linear-gradient(90deg,var(--lav),var(--lav2));
margin-top:5px;
border-radius:2px;
opacity:.95;
}
.tos-card p{
margin:0 0 14px;
line-height:1.66;
font-size:.97rem;
color:#1f273d;
}
.tos-card ul{
margin:10px 0 6px 1.1em;
padding:0;
}
.tos-card li{
margin:6px 0;
line-height:1.65;
color:#1f273d;
}
.tos-note{
background:linear-gradient(180deg,#ffffff,#f7f9ff);
padding:13px 16px;
border-radius:12px;
border:1px solid rgba(106,126,255,.22);
box-shadow:0 6px 20px rgba(106,126,255,.08);
color:#263158;
font-weight:650;
margin-top:12px;
line-height:1.55;
}
.tos-actions{
display:grid;
gap:12px;
margin-top:10px;
}
@media(min-width:680px){
.tos-actions{grid-template-columns:repeat(2,1fr);}
}
.tos-btn{
display:flex;
align-items:center;
gap:12px;
padding:14px 14px;
border-radius:14px;
text-decoration:none;
border:1px solid rgba(106,126,255,.18);
background:linear-gradient(180deg,#ffffff,#f7f9ff);
box-shadow:0 8px 22px rgba(106,126,255,.08);
color:var(--ink);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.tos-btn i{
width:42px;height:42px;
border-radius:12px;
display:grid;place-items:center;
background:linear-gradient(135deg,rgba(106,126,255,.18),rgba(255,255,255,.7));
box-shadow:inset 0 0 0 1px rgba(106,126,255,.22);
font-size:18px;
color:var(--lav);
flex:0 0 auto;
}
.tos-btn span{font-weight:900;line-height:1.15;}
.tos-btn small{
display:block;
margin-top:2px;
color:var(--ink-soft);
font-weight:650;
font-size:.86rem;
}
.tos-btn:hover{
transform:translateY(-1px);
box-shadow:0 12px 30px rgba(106,126,255,.12);
border-color:rgba(106,126,255,.28);
background:linear-gradient(180deg,#ffffff,#f4f6ff);
}
.tos-btn:active{transform:translateY(0);}
.tos-btn:focus-visible{outline:2px solid rgba(106,126,255,.45);outline-offset:2px;}
.tos-btn-primary span{
background:linear-gradient(90deg,var(--lav),var(--lav2));
-webkit-background-clip:text;
color:transparent;
}
.tos-btn-wa i{
background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(255,255,255,.72));
box-shadow:inset 0 0 0 1px rgba(34,197,94,.25);
color:#16a34a;
}
.tos-contract{
margin-top:14px;
padding:16px 18px;
border-radius:14px;
background:linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.90));
border:1px solid rgba(106,126,255,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
overflow-wrap:anywhere;
word-break:break-word;
}
.tos-contract h1,
.tos-contract h2,
.tos-contract h3{
margin:14px 0 8px;
font-weight:900;
letter-spacing:-.2px;
line-height:1.25;
color:var(--ink);
}
.tos-contract h2{font-size:1.02rem;}
.tos-contract h3{font-size:.98rem;}
.tos-contract p,
.tos-contract li{
margin:0 0 10px;
font-size:.95rem;
line-height:1.72;
color:rgba(15,23,42,.92);
}
.tos-contract p:last-child{margin-bottom:0;}
.tos-contract ul,
.tos-contract ol{
margin:10px 0 10px 1.1em;
padding:0;
}
.tos-contract li{margin:6px 0;}
.tos-contract a{
color:var(--lav);
text-decoration:none;
font-weight:850;
}
.tos-contract a:hover{text-decoration:underline;}
.tos-contract hr{
border:0;
height:1px;
background:linear-gradient(to right, transparent, rgba(15,23,42,.14), transparent);
margin:14px 0;
}
@media (max-width:480px){
.tos-wrap{padding:16px 14px 40px;}
.tos-hero{padding:16px 16px;}
.tos-card{padding:16px 16px;}
.tos-contract{padding:14px 14px;}
}