:root{
  --ink:#101820;
  --navy:#172535;
  --navy2:#263d55;
  --steel:#7790aa;
  --blue:#a9c9eb;
  --ice:#eef4f9;
  --paper:#f5f7f9;
  --muted:#708092;
  --line:rgba(16,24,32,.12);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%}
body{
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 12%,rgba(169,201,235,.26),transparent 28%),
    radial-gradient(circle at 90% 86%,rgba(38,61,85,.10),transparent 30%),
    #e9eef2;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}

.screen{
  width:100%;
  height:100dvh;
  padding:clamp(10px,1.7vw,24px);
  display:grid;
  place-items:center;
}
.shell{
  width:min(1500px,100%);
  height:min(920px,100%);
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.78);
  border-radius:30px;
  background:rgba(245,248,250,.78);
  box-shadow:0 30px 80px rgba(24,41,58,.14);
  backdrop-filter:blur(16px);
}
.topbar{
  min-height:66px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:10px 18px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand-mark{
  width:40px;height:40px;
  display:grid;place-items:center;
  background:var(--navy);
  color:white;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
}
.brand-name{font-size:12px;font-weight:900;letter-spacing:.18em}
.top-meta{
  display:flex;gap:22px;
  color:var(--muted);
  font-size:9px;font-weight:900;letter-spacing:.18em;
}
.x-link{
  justify-self:end;
  font-size:10px;font-weight:900;letter-spacing:.16em;
}

.content{
  min-height:0;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(18px,2.4vw,36px);
  padding:clamp(18px,2.7vw,42px);
  align-items:center;
}
.copy{
  min-width:0;
  padding-left:clamp(4px,1vw,14px);
}
.eyebrow{
  margin:0 0 14px;
  color:#647b91;
  font-size:10px;font-weight:900;letter-spacing:.22em;
}
h1{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(64px,8.8vw,138px);
  line-height:.72;
  letter-spacing:-.06em;
  color:#23374b;
}
h1 em{
  font-style:normal;
  color:#8fb4d8;
  font-weight:400;
}
.ticker{
  margin:16px 0 0;
  color:#6c8aa7;
  font-size:clamp(18px,2.2vw,28px);
  font-weight:900;
  letter-spacing:.27em;
}
.tagline{
  margin:18px 0 0;
  max-width:480px;
  color:#5f6f7f;
  font-size:clamp(15px,1.45vw,19px);
  line-height:1.5;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.btn{
  min-width:94px;
  padding:13px 18px;
  border:1px solid #c0cbd5;
  background:rgba(255,255,255,.68);
  color:#42596e;
  text-align:center;
  font-size:9px;font-weight:900;letter-spacing:.15em;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn.primary{
  background:#20364b;
  color:#f2f6f9;
  border-color:#20364b;
}
.btn.compact{min-width:54px}
.is-disabled{opacity:.38;cursor:default}

.contract{
  margin-top:20px;
  padding:14px 15px 13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.58);
}
.contract-top{
  display:flex;justify-content:space-between;gap:14px;
  color:#7a8b9b;
  font-size:8px;font-weight:900;letter-spacing:.18em;
}
.contract-row{
  margin-top:9px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}
.contract-row code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:inherit;
  color:#263c50;
  font-size:clamp(13px,1.2vw,16px);
  font-weight:800;
}
.contract-row button{
  border:0;
  background:#243a4f;
  color:white;
  padding:9px 12px;
  font-size:8px;font-weight:900;letter-spacing:.12em;
  cursor:pointer;
}
.small-note{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:13px;
  color:#8997a4;
  font-size:8px;font-weight:900;letter-spacing:.14em;
}

.visual{
  position:relative;
  min-height:0;
  height:100%;
  overflow:hidden;
  border-radius:24px;
  background:#21384e;
  box-shadow:0 24px 60px rgba(30,51,72,.18);
}
.banner-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(18px) saturate(.78) brightness(.74);
  transform:scale(1.10);
}
.visual::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(16,30,44,.12),rgba(16,30,44,.34)),
    linear-gradient(90deg,rgba(15,28,41,.26),transparent 48%);
}
.portrait-card{
  position:absolute;
  z-index:2;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:min(70%,56vh,600px);
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  background:#8fa4b8;
  box-shadow:0 28px 60px rgba(13,29,44,.26);
}
.portrait-card img{
  width:100%;height:100%;
  object-fit:cover;
}
.portrait-label{
  position:absolute;
  right:12px;bottom:12px;
  padding:9px 11px;
  background:rgba(237,244,249,.86);
  color:#294056;
  font-size:8px;font-weight:900;letter-spacing:.15em;
  backdrop-filter:blur(8px);
}

footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:12px 18px 14px;
  border-top:1px solid var(--line);
  color:#8595a4;
  font-size:8px;font-weight:900;letter-spacing:.17em;
}

@media(max-width:900px){
  .screen{padding:8px}
  .shell{border-radius:20px}
  .topbar{min-height:54px;padding:7px 10px}
  .brand-mark{width:34px;height:34px}
  .brand-name{font-size:10px}
  .top-meta{display:none}
  .content{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    gap:12px;
    padding:12px 14px;
  }
  .copy{padding:0}
  .eyebrow{margin-bottom:8px;font-size:8px}
  h1{font-size:clamp(48px,13vw,78px);line-height:.76}
  .ticker{margin-top:10px;font-size:16px}
  .tagline{margin-top:10px;font-size:13px;line-height:1.35}
  .actions{margin-top:12px;gap:7px}
  .btn{padding:10px 12px;min-width:70px;font-size:8px}
  .contract{margin-top:12px;padding:10px 11px}
  .small-note{display:none}
  .visual{min-height:0;border-radius:16px}
  .portrait-card{width:min(66%,32vh,360px)}
  footer{padding:9px 10px 10px;font-size:7px}
}
@media(max-width:560px){
  .brand-name{display:none}
  .content{padding:10px}
  .portrait-card{width:min(74%,30vh,320px)}
  .actions .btn{flex:1 1 calc(50% - 4px)}
  .contract-top span:last-child{display:none}
}
@media(max-height:700px) and (min-width:901px){
  .topbar{min-height:54px}
  .content{padding:16px 28px}
  h1{font-size:78px}
  .tagline{font-size:14px}
  .actions{margin-top:16px}
  .contract{margin-top:14px}
  .portrait-card{width:min(66%,50vh,420px)}
}