:root{
  --primary:#2563eb; --secondary:#06b6d4; --dark:#0b1220; --muted:#64748b;
  --light:#f8fafc; --white:#fff; --border:#e2e8f0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--dark);background:var(--white);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,92%);margin:auto}
.navbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.45rem;font-weight:800;color:var(--dark)}
.logo span{color:var(--primary)}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{font-weight:600;color:#334155}
.navlinks a:hover{color:var(--primary)}
.btn{display:inline-block;padding:12px 20px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:700;box-shadow:0 8px 25px rgba(37,99,235,.2)}
.btn.outline{background:transparent;color:var(--primary);border:1px solid #bfdbfe;box-shadow:none}
.hero{padding:82px 0;background:linear-gradient(135deg,#eff6ff 0%,#ecfeff 55%,#fff 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}
.badge{display:inline-block;background:#dbeafe;color:#1d4ed8;padding:7px 12px;border-radius:999px;font-size:.86rem;font-weight:800;margin-bottom:18px}
h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.05;letter-spacing:-2px;margin-bottom:20px}
h1 span{color:var(--primary)}
.hero p{font-size:1.1rem;color:var(--muted);max-width:620px;margin-bottom:28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-img{width:100%;border-radius:24px;box-shadow:0 25px 60px rgba(15,23,42,.15)}
section{padding:78px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 42px}
.section-head h2{font-size:2.2rem;margin-bottom:10px}
.section-head p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--border);border-radius:18px;padding:28px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.05)}
.card-icon{font-size:2rem;margin-bottom:14px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted)}
.feature{background:var(--light)}
.feature-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.feature-img{width:100%;border-radius:20px}
.list{list-style:none;margin-top:20px}
.list li{margin:12px 0;color:#334155}
.list li:before{content:"✓";color:var(--primary);font-weight:800;margin-right:10px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.stat{padding:22px;border:1px solid var(--border);border-radius:15px;text-align:center}
.stat strong{font-size:2rem;display:block;color:var(--primary)}
.cta{background:linear-gradient(135deg,#0f172a,#172554);color:white;border-radius:24px;padding:52px;text-align:center}
.cta p{color:#cbd5e1;margin:10px auto 24px;max-width:650px}
.page-hero{padding:65px 0;background:#eff6ff}
.page-hero h1{font-size:3rem;letter-spacing:-1px}
.page-hero p{color:var(--muted);max-width:700px}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}
.contact-box{padding:30px;border:1px solid var(--border);border-radius:18px}
.contact-item{margin:18px 0}
.contact-item small{display:block;color:var(--muted)}
.contact-item a{color:var(--primary);font-weight:700}
form{display:grid;gap:15px}
input,textarea{width:100%;padding:14px 15px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
textarea{min-height:150px;resize:vertical}
footer{background:#0b1220;color:#cbd5e1;padding:35px 0;margin-top:70px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer strong{color:white}
@media(max-width:800px){
 .navlinks{gap:10px}.navlinks a:not(.btn){display:none}
 .hero-grid,.feature-grid,.contact-grid{grid-template-columns:1fr}
 .cards{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(2,1fr)}
 h1{letter-spacing:-1px}
 .cta{padding:35px 22px}
}
:root{--primary:#2563eb;--secondary:#06b6d4;--dark:#0b1220;--muted:#64748b;--light:#f8fafc;--white:#fff;--border:#e2e8f0;--success:#059669;--danger:#dc2626}*{box-sizing:border-box}body{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--dark);line-height:1.6}a{text-decoration:none}.container{width:min(1120px,92%);margin:auto}.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-size:1.45rem;font-weight:800}.logo span{color:var(--primary)}.navlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.navlinks a{font-weight:600;color:#334155}.btn{display:inline-block;padding:11px 18px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff!important;font-weight:700;border:0;cursor:pointer}.btn.outline{background:transparent;color:var(--primary)!important;border:1px solid #bfdbfe}.hero{padding:82px 0;background:linear-gradient(135deg,#eff6ff,#ecfeff 55%,#fff)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.badge{display:inline-block;background:#dbeafe;color:#1d4ed8;padding:7px 12px;border-radius:999px;font-size:.86rem;font-weight:800;margin-bottom:18px}h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.05;letter-spacing:-2px;margin-bottom:20px}h1 span{color:var(--primary)}h2{font-size:2.2rem;line-height:1.15;margin-bottom:12px}.hero p,.page-hero p{font-size:1.1rem;color:var(--muted);max-width:760px;margin-bottom:28px}.hero-img{width:100%;border-radius:24px}.actions{display:flex;gap:12px;flex-wrap:wrap}section{padding:72px 0}.section-head{text-align:center;max-width:760px;margin:0 auto 42px}.section-head p,.muted{color:var(--muted)}.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.training-card,.panel{border:1px solid var(--border);border-radius:18px;padding:28px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.05)}.training-icon{font-size:2rem;margin-bottom:15px}.featured-training{border:2px solid #93c5fd}.certificate-badge{display:inline-block;margin-top:14px;padding:8px 12px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:.82rem;font-weight:800}.feature{background:#f8fafc}.feature-grid,.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.list{padding-left:20px}.list li{margin:8px 0}.cta{background:linear-gradient(135deg,#eff6ff,#ecfeff);border:1px solid #bfdbfe;padding:40px;border-radius:24px;text-align:center}.form-wrap{max-width:520px;margin:55px auto}.form-title{text-align:center;margin-bottom:28px}.form-group{margin-bottom:17px}.form-group label{display:block;font-weight:700;margin-bottom:7px}.form-group input,.form-group select{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}.alert{padding:12px 14px;border-radius:10px;margin:14px 0}.alert.error{background:#fef2f2;color:#991b1b}.alert.success{background:#ecfdf5;color:#065f46}.dashboard{padding:45px 0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:28px;flex-wrap:wrap}.kpi{padding:22px;border:1px solid var(--border);border-radius:16px;background:#fff}.kpi small{color:var(--muted)}.kpi strong{display:block;font-size:1.4rem}.status{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:800}.status.ready{background:#dcfce7;color:#166534}.status.wait{background:#fef3c7;color:#92400e}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid var(--border);white-space:nowrap}.table th{background:#f8fafc}.certificate-panel{background:linear-gradient(145deg,#eff6ff,#ecfeff);border:2px dashed #60a5fa;border-radius:22px;padding:45px;text-align:center}.verify-card{max-width:650px;margin:55px auto;text-align:center}.verified{color:#047857;font-weight:900;font-size:1.2rem}.certificate-box{max-width:850px;margin:35px auto;border:12px double #1d4ed8;padding:60px 55px;text-align:center;background:#fff}.cert-brand{font-size:1.15rem;letter-spacing:3px;font-weight:900;color:#1d4ed8}.certificate-box h1{font-size:2.7rem;letter-spacing:0;margin:15px 0}.certificate-name{font-size:2.2rem;font-weight:800;margin:20px 0}.certificate-course{font-size:1.5rem;font-weight:700;color:#1d4ed8}.cert-meta{margin:30px auto;display:flex;justify-content:center;gap:45px;flex-wrap:wrap;color:#475569}.cert-id{font-weight:800;color:#0f172a}footer{background:var(--dark);color:#cbd5e1;padding:35px 0;margin-top:40px}.footer-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}.footer-row a{color:#fff}.page-hero{padding:65px 0;background:linear-gradient(135deg,#eff6ff,#fff)}@media(max-width:800px){.nav{padding:12px 0}.navlinks{gap:10px}.hero-grid,.feature-grid,.grid-2{grid-template-columns:1fr}.training-grid,.grid-3{grid-template-columns:1fr}.footer-row{grid-template-columns:1fr}.certificate-box{padding:35px 18px}.certificate-name{font-size:1.7rem}}@media print{.navbar,.cert-actions,footer{display:none!important}.certificate-box{margin:0;box-shadow:none}.print-page{background:#fff}}


/* ANA Technology premium certificate */
.certificate-page{
  padding:32px 0 55px;
  background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
}
.certificate-wrap{width:min(1180px,94%);margin:0 auto}
.certificate-box-premium{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:8px solid #174ea6;
  box-shadow:0 20px 60px rgba(15,55,120,.16);
  min-height:690px;
  padding:9px;
}
.certificate-box-premium:before{
  content:"";
  position:absolute;
  inset:12px;
  border:2px solid #d4a72c;
  pointer-events:none;
}
.certificate-box-premium:after{
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid #d4a72c;
  pointer-events:none;
}
.cert-inner{
  position:relative;
  z-index:2;
  min-height:650px;
  padding:42px 62px 30px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.cert-header{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  color:#123f87;
}
.cert-mark{
  width:58px;height:58px;
  border-radius:50%;
  border:3px solid #d4a72c;
  display:grid;place-items:center;
  font-size:20px;font-weight:900;
  color:#174ea6;
  background:linear-gradient(145deg,#fff,#eef5ff);
  letter-spacing:-2px;
}
.cert-brand{
  font-size:24px;
  font-weight:900;
  letter-spacing:3px;
  color:#174ea6;
}
.cert-tagline{
  font-size:11px;
  letter-spacing:4px;
  color:#7b6a38;
  margin-top:2px;
}
.cert-title{
  margin-top:30px;
  color:#123f87;
  font-family:Georgia,"Times New Roman",serif;
  font-size:39px;
  font-weight:700;
  text-transform:capitalize;
}
.cert-subtitle{
  margin-top:8px;
  color:#475569;
  font-size:15px;
}
.certificate-name-script{
  margin:13px auto 2px;
  color:#102d67;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:45px;
  font-weight:700;
  line-height:1.1;
}
.cert-name-line{
  width:min(430px,70%);
  height:2px;
  background:#d4a72c;
  margin:0 auto 15px;
}
.cert-body{
  max-width:780px;
  margin:0 auto;
  font-size:15px;
  color:#334155;
}
.cert-body strong{color:#123f87}
.cert-description{
  max-width:720px;
  margin:8px auto 17px;
  font-family:Georgia,"Times New Roman",serif;
  color:#64748b;
  font-size:13px;
}
.cert-lower{
  display:grid;
  grid-template-columns:1fr 150px 1fr;
  gap:25px;
  align-items:center;
  max-width:900px;
  width:100%;
  margin:2px auto 0;
}
.cert-info{
  text-align:left;
  font-size:12px;
  color:#334155;
}
.cert-info div{
  display:flex;
  gap:10px;
  padding:4px 0;
}
.cert-info strong{min-width:105px;color:#123f87}
.cert-info span{color:#334155}
.cert-seal{
  width:132px;height:132px;
  margin:auto;
  border-radius:50%;
  background:radial-gradient(circle,#174ea6 0 55%,#d4a72c 56% 61%,#12366f 62% 100%);
  color:#fff;
  border:5px double #fff;
  box-shadow:0 0 0 2px #d4a72c,0 6px 16px rgba(15,55,120,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
}
.seal-ring{font-size:24px;font-weight:900;letter-spacing:-2px}
.seal-text{font-size:8px;letter-spacing:2px;font-weight:800}
.seal-ribbon{
  margin-top:8px;
  background:#d4a72c;
  color:#173b78;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
  padding:2px 9px;
}
.cert-signature-block{
  text-align:center;
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  color:#123f87;
}
.cert-signature{
  display:block;
  width:205px;
  max-width:100%;
  height:68px;
  object-fit:contain;
  object-position:center;
  margin:0 auto -4px;
}
.signature-line{
  width:220px;
  max-width:100%;
  border-bottom:1px solid #9ca3af;
  margin-bottom:5px;
}
.cert-signature-block strong{font-size:13px}
.cert-signature-block small{
  display:block;
  font-size:10px;
  line-height:1.35;
  color:#475569;
}
.cert-verification-note{
  margin:18px auto 0;
  max-width:760px;
  font-size:10px;
  color:#64748b;
}
.cert-corner{
  position:absolute;
  width:75px;height:75px;
  z-index:1;
}
.cert-corner:before,.cert-corner:after{
  content:"";position:absolute;display:block;
  background:#174ea6;
}
.cert-corner:before{width:75px;height:8px}
.cert-corner:after{width:8px;height:75px}
.cert-corner-tl{top:0;left:0}.cert-corner-tr{top:0;right:0;transform:scaleX(-1)}
.cert-corner-bl{bottom:0;left:0;transform:scaleY(-1)}
.cert-corner-br{bottom:0;right:0;transform:scale(-1)}
.cert-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}
@media(max-width:800px){
  .cert-inner{padding:35px 25px 25px}
  .cert-title{font-size:30px}
  .certificate-name-script{font-size:34px}
  .cert-lower{grid-template-columns:1fr;gap:15px}
  .cert-info{text-align:center}
  .cert-info div{justify-content:center}
  .cert-seal{order:2}
  .cert-signature-block{order:3}
}
@media print{
  @page{size:A4 landscape;margin:0}
  html,body{background:#fff!important}
  .navbar,.cert-actions,footer{display:none!important}
  .certificate-page{padding:0;background:#fff}
  .certificate-wrap{width:100%;margin:0}
  .certificate-box-premium{
    width:100%;
    height:100vh;
    min-height:0;
    border-width:7px;
    box-shadow:none;
    page-break-inside:avoid;
  }
  .cert-inner{min-height:calc(100vh - 30px);padding:30px 55px 20px}
  .cert-title{margin-top:20px}
  .certificate-name-script{font-size:40px}
  .cert-description{margin-bottom:12px}
  .cert-verification-note{margin-top:12px}
}