*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:"Nunito Sans", Arial, Helvetica, sans-serif;
background:linear-gradient(180deg,#f6f2ee 0%,#efebe6 100%);
color:#1f2f3d;
}

.cert-hero{
position:relative;
overflow:hidden;
padding:36px 20px 92px;
text-align:center;
background:
radial-gradient(circle at top left, rgba(243,156,18,0.22), transparent 32%),
radial-gradient(circle at top right, rgba(255,122,89,0.18), transparent 28%),
linear-gradient(180deg,#fcfaf8 0%,#f3eee9 100%);
}

.hero-glow{
position:absolute;
width:280px;
height:280px;
border-radius:50%;
filter:blur(10px);
opacity:0.55;
pointer-events:none;
}

.hero-glow-left{
top:-110px;
left:-70px;
background:rgba(243,156,18,0.28);
}

.hero-glow-right{
top:-80px;
right:-60px;
background:rgba(255,122,89,0.2);
}

.back-btn{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
border-radius:999px;
background:#202a33;
color:#fff;
text-decoration:none;
font-weight:700;
box-shadow:0 12px 24px rgba(32,42,51,0.2);
transition:transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.back-btn:hover{
transform:translateY(-2px);
background:#f39c12;
box-shadow:0 16px 28px rgba(243,156,18,0.28);
}

.hero-copy{
position:relative;
z-index:1;
max-width:760px;
margin:34px auto 0;
}

.eyebrow{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:#ffffff;
color:#f39c12;
font-size:14px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
box-shadow:0 10px 24px rgba(31,47,61,0.08);
}

.hero-copy h1{
margin:18px 0 14px;
font-size:clamp(42px,6vw,68px);
line-height:1;
}

.hero-copy p{
margin:0 auto;
max-width:620px;
font-size:18px;
line-height:1.7;
color:#546473;
}

.certificates-main{
max-width:1120px;
margin:-46px auto 0;
padding:0 20px 80px;
display:grid;
gap:28px;
}

.certificate-card{
background:rgba(255,255,255,0.88);
backdrop-filter:blur(4px);
border:1px solid rgba(255,255,255,0.7);
border-radius:28px;
padding:28px;
box-shadow:0 22px 44px rgba(31,47,61,0.12);
}

.certificate-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:22px;
}

.certificate-brand{
display:flex;
align-items:center;
gap:16px;
}

.certificate-brand img{
width:42px;
height:42px;
flex-shrink:0;
}

.brand-label{
margin:0 0 4px;
font-size:14px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:#7c4dff;
}

.hubspot-label{
color:#ff7a59;
}

.certificate-head h2{
margin:0;
font-size:28px;
line-height:1.1;
}

.certificate-meta{
margin:0;
white-space:nowrap;
padding:10px 16px;
border-radius:999px;
background:#fff7eb;
color:#c87400;
font-size:14px;
font-weight:800;
box-shadow:inset 0 0 0 1px rgba(243,156,18,0.18);
}

.certificate-preview{
overflow:hidden;
border-radius:20px;
background:#f7f2ec;
box-shadow:0 20px 36px rgba(31,47,61,0.14);
}

.certificate-preview img{
display:block;
width:100%;
height:auto;
}

@media (max-width: 760px){
  .cert-hero{
    padding:28px 16px 78px;
  }

  .hero-copy p{
    font-size:16px;
  }

  .certificates-main{
    margin-top:-38px;
    padding:0 16px 56px;
  }

  .certificate-card{
    padding:20px;
    border-radius:22px;
  }

  .certificate-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .certificate-brand{
    align-items:flex-start;
  }

  .certificate-head h2{
    font-size:23px;
  }

  .certificate-meta{
    white-space:normal;
  }
}