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

:root{
--primary:#2563eb;
--primary-dark:#1d4ed8;
--primary-soft:#eff6ff;
--dark:#0f172a;
--text:#334155;
--muted:#64748b;
--line:#e2e8f0;
--bg:#f6f8fb;
--white:#ffffff;
--shadow:0 20px 45px rgba(15,23,42,.08);
}

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--dark);
min-height:100vh;
line-height:1.7;
}

.topbar{
width:100%;
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 7%;
background:rgba(255,255,255,.96);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(14px);
}

.logo{
font-size:1.55rem;
font-weight:900;
color:var(--primary);
letter-spacing:-.03em;
}

.back-btn{
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 18px;
border-radius:14px;
font-size:.94rem;
font-weight:900;
background:var(--primary-soft);
color:var(--primary);
border:1px solid #dbeafe;
transition:.25s;
}

.back-btn:hover{
transform:translateY(-2px);
background:#dbeafe;
}

.hero{
padding:78px 7% 54px;
background:
radial-gradient(circle at top right,rgba(37,99,235,.13),transparent 34%),
linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);
text-align:center;
border-bottom:1px solid var(--line);
}

.hero-content{
max-width:820px;
margin:auto;
}

.mini-badge{
display:inline-flex;
padding:8px 16px;
border-radius:999px;
background:var(--primary-soft);
color:var(--primary);
font-size:.78rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:18px;
}

.hero h1{
font-size:clamp(2.4rem,6vw,4.6rem);
line-height:1.05;
font-weight:900;
letter-spacing:-.06em;
color:var(--dark);
margin-bottom:18px;
}

.hero p{
font-size:1.08rem;
line-height:1.9;
color:var(--muted);
max-width:760px;
margin:auto;
}

.certificates-container{
width:100%;
max-width:1120px;
margin:auto;
padding:48px 20px 70px;
}

.summary-card,
.certificate-card{
background:white;
border:1px solid var(--line);
border-radius:28px;
box-shadow:var(--shadow);
}

.summary-card{
padding:34px;
margin-bottom:26px;
}

.summary-card h2{
font-size:2rem;
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
color:var(--dark);
margin-bottom:10px;
}

.summary-card p{
font-size:1rem;
font-weight:700;
color:var(--muted);
}

.summary-actions{
margin-top:22px;
}

.verify-global-btn{
width:100%;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
padding:16px 20px;
border-radius:17px;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:white;
font-weight:900;
box-shadow:0 14px 28px rgba(37,99,235,.22);
transition:.25s;
}

.verify-global-btn:hover{
transform:translateY(-2px);
}

.certificates-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}

.certificate-card{
padding:30px;
}

.certificate-card.obtained{
border-color:#bfdbfe;
background:linear-gradient(180deg,#ffffff,#eff6ff);
}

.card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}

.card-top h2{
font-size:1.45rem;
line-height:1.15;
font-weight:900;
letter-spacing:-.04em;
color:var(--dark);
}

.type{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:7px 12px;
font-size:.78rem;
font-weight:900;
background:#f8fafc;
color:var(--muted);
border:1px solid var(--line);
}

.type.free,
.free{
background:#eff6ff;
color:var(--primary);
border-color:#dbeafe;
}

.premium-badge{
background:#fef3c7;
color:#92400e;
border-color:#fde68a;
}

.status-badge{
display:inline-flex;
width:max-content;
padding:8px 13px;
border-radius:999px;
font-size:.82rem;
font-weight:900;
margin-bottom:22px;
}

.approved{
background:#dbeafe;
color:#1d4ed8;
}

.pending-badge{
background:#f1f5f9;
color:#64748b;
}

.certificate-card p{
color:#64748b;
font-weight:600;
line-height:1.8;
margin-bottom:20px;
}

.id-box{
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:18px;
padding:18px;
margin:14px 0 20px;
}

.id-box span{
display:block;
font-size:.76rem;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
color:#64748b;
margin-bottom:8px;
}

.id-box strong{
display:block;
font-size:1.03rem;
font-weight:900;
color:var(--primary);
word-break:break-word;
}

.card-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.primary-btn,
.disabled-btn{
text-decoration:none;
border:none;
display:flex;
align-items:center;
justify-content:center;
width:100%;
padding:15px 18px;
border-radius:16px;
font-size:.96rem;
font-weight:900;
font-family:'Inter',sans-serif;
}

.primary-btn{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:white;
box-shadow:0 14px 28px rgba(37,99,235,.20);
}

.disabled-btn{
background:#f1f5f9;
color:#94a3b8;
cursor:not-allowed;
}

@media(max-width:760px){
.certificates-grid{
grid-template-columns:1fr;
}

.hero{
padding:58px 5% 42px;
}

.certificates-container{
padding:32px 14px 56px;
}

.summary-card,
.certificate-card{
padding:24px;
border-radius:24px;
}

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

.summary-card h2{
font-size:1.65rem;
}

.card-top{
flex-direction:column;
align-items:flex-start;
}
}

@media(max-width:420px){
.topbar{
height:68px;
padding:0 5%;
}

.logo{
font-size:1.25rem;
}

.back-btn{
padding:8px 13px;
font-size:.85rem;
}

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