:root{
  --navy:#003B95;
  --navy-deep:#00224F;
  --navy-dark:#001A3A;
  --blue-mid:#0057D9;
  --blue-light:#E8F0FE;
  --white:#FFFFFF;
  --off-white:#F7F9FC;
  --gray-100:#EEF1F6;
  --gray-200:#D5DAE3;
  --gray-400:#8B95A5;
  --gray-600:#4A5568;
  --gray-800:#1E2A3A;
  --yellow:#FEBB02;
  --shadow-md:0 10px 30px rgba(0,15,40,0.08);
  --shadow-lg:0 20px 50px rgba(0,15,40,0.16);
  --radius:16px;
  --radius-xl:24px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'DM Sans',sans-serif;
  color:var(--gray-800);
  background:
    radial-gradient(circle at top right, rgba(254,187,2,0.14), transparent 24%),
    radial-gradient(circle at bottom left, rgba(0,87,217,0.18), transparent 28%),
    linear-gradient(160deg,var(--navy-dark) 0%,var(--navy-deep) 32%,var(--navy) 100%);
  -webkit-font-smoothing:antialiased;
}

.page-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px;
  background:rgba(0,26,58,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--white);
  font-weight:700;
  letter-spacing:-0.2px;
}

.brand img{
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  padding:2px;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--yellow);color:var(--navy-deep)}
.btn-secondary{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12);color:var(--white)}

.content{
  width:min(1200px,calc(100% - 32px));
  margin:0 auto;
  padding:40px 0 32px;
  flex:1;
}

.hero-card{
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:32px;
  margin-bottom:24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--blue-light);
  color:var(--navy);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.hero-card h1{
  margin:18px 0 12px;
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  color:var(--navy-deep);
}

.hero-card p{
  margin:0;
  max-width:760px;
  color:var(--gray-600);
  font-size:1rem;
  line-height:1.7;
}

.viewer-frame{
  background:var(--white);
  border-radius:var(--radius-xl);
  padding:14px;
  box-shadow:var(--shadow-md);
}

.viewer-frame iframe{
  display:block;
  width:100%;
  height:calc(100vh - 280px);
  min-height:640px;
  border:0;
  border-radius:18px;
  background:var(--gray-100);
}

.fallback{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--gray-600);
  font-size:.92rem;
}

.fallback a{color:var(--navy);font-weight:700}

@media (max-width: 768px){
  .topbar{padding:16px}
  .content{width:min(100%,calc(100% - 20px));padding:24px 0}
  .hero-card{padding:24px}
  .viewer-frame{padding:10px}
  .viewer-frame iframe{height:72vh;min-height:520px}
}

@media (max-width: 520px){
  .topbar{align-items:flex-start;flex-direction:column}
  .top-actions{width:100%}
  .top-actions .btn{flex:1}
  .hero-card h1{font-size:1.75rem}
  .hero-card p{font-size:.95rem}
  .viewer-frame iframe{height:68vh;min-height:460px}
  .fallback{font-size:.88rem}
}