.section-3 {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: radial-gradient( farthest-corner at 0% 0%, #0d2e63 0%, #00273d 100% );
}

.section-3::before{
  content:"";
  position:absolute; 
  inset:0;
  pointer-events:none;
  background: 
    linear-gradient(to bottom, 
      rgba(0, 97, 149,0.05) 0%, 
      rgba(0,0,0,0) 50% ),
    linear-gradient(to right,
      rgba(0, 97, 149, 0.40) 0%,
      rgba(32, 189, 216, 0.05) 45%,
      rgba(32, 189, 216, 0.05) 55%,
      rgba(0, 0, 70, 0.55) 100%);
}

.section-3::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(farthest-corner at 50% 55%,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.20) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.20) 100%);
}

.ocean-left {
  z-index: 3;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 200px;
  height: var(--x999);
  width: 30vw;
  background: rgba(0,0,0,0);
}

.ocean-right {
  z-index: 3;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 200px;
  height: var(--x999);
  width: 30vw;
  background: rgba(0,0,0,0);
}

.oceanbox {
	z-index: 10;
	position: absolute;
	top: var(--x78);
	height: var(--x700);
	width: calc(var(--x700) * 1.6);
	left: 50%;
	transform: translateX(-50%);
	border-radius: var(--x78);
    	overflow: hidden;

  	backdrop-filter: blur(var(--x2));

	box-shadow:
		0 0 var(--x5) rgba(0,0,0,0.25),
		0 var(--x10) var(--x10) rgba(0,0,0,0.15),
		0 var(--x15) var(--x15) rgba(0,0,0,0.15),
		0 var(--x20) var(--x20) rgba(0,0,0,0.15),
		0 0 var(--x5)  rgba(10,20,50,0.30) inset,
		0 0 var(--x10) rgba(10,20,50,0.25) inset,
		0 0 var(--x60) rgba(10,20,50,0.20) inset,
		0 0 var(--x90) rgba(10,20,50,0.15) inset,
		0 0 var(--x120) rgba(10,20,50,0.10) inset,
		0 0 var(--x150) rgba(10,20,50,0.05) inset;

	background: rgba(218,192,160,0.10);
	font-family: 'Inter Regular';
	font-size: var(--x18);
	line-height: var(--x28);
	letter-spacing: 0.02em;
	font-weight:normal;
    	text-align: center;
	text-shadow:
        0 var(--x1) var(--x1) rgba(0, 0, 0, 0.80),
        0 var(--x2) var(--x2) rgba(0, 0, 0, 0.60);
	color: rgba(235, 221, 204, 1);
}

.oceanbox h1{
  margin: 0;
  padding: 0;
  font-size: var(--x32);
  line-height: var(--x48);
  font-family: 'Inter Regular';
	font-size: 42px;
	letter-spacing: 0.02em;
	font-weight: normal;
	text-shadow:
        	0 0   1px rgba(0, 0, 0, 0.10),
        	0 1px 1px rgba(0, 0, 0, 0.90),
        	0 2px 2px rgba(0, 0, 0, 0.70),
        	0 4px 4px rgba(0, 0, 0, 0.15);
	color: rgba(235, 221, 204, 0.88);
}

.progress-wrap{
  width: min(85%, calc(var(--x700) * 1.35));
  margin: var(--x22) auto 0 auto;
  padding: var(--x18) var(--x18);
  border-radius: 0 0 var(--x26) var(--x26);
  background: rgba(10, 20, 50, 0.50);
  box-shadow:
    0 0 var(--x10) rgba(0,0,0,0.18) inset,
    0 0 var(--x60) rgba(0,0,0,0.08) inset;

}

.progress-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.progress-table tr{
  border-bottom: var(--x1) solid rgba(255,255,255,0.08);
}

.progress-table tr:last-child{
  border-bottom: none;
}

.progress-table td{
  padding: var(--x10) var(--x8);
  vertical-align: middle;
}

.p-label{
  width: 38%;
  text-align: left;
  font-family: 'Inter Regular';
  letter-spacing: 0.02em;
  color: rgba(235, 221, 204, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-bar{
  width: 40%;
}

.p-val{
  width: 15%;
  text-align: right;
  font-family: 'Inter Medium';
  color: rgba(203, 158, 122, 0.90);
  letter-spacing: 0.04em;
}

.bar{
  --p: 50%;
  height: var(--x12);
  border-radius: var(--x12);
  position: relative;
  overflow: hidden;

  background: rgba(0,0,0,0.25);
  border: var(--x1) solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 var(--x10) rgba(0,0,0,0.35) inset,
    0 var(--x2) var(--x6) rgba(0,0,0,0.25);
}

.bar .fill{
  width: var(--p);
  height: 100%;
  border-radius: inherit;

  background: linear-gradient(to right,
    rgba(140,255,210,0.15) 0%,
    rgba(140,255,210,0.55) 45%,
    rgba(140,255,210,0.25) 100%);

  box-shadow:
    0 0 var(--x10) rgba(100,255,200,0.22),
    0 0 var(--x20) rgba(100,255,200,0.18);
}

.progress-note{
  margin-top: var(--x14);
  font-size: var(--x16);
  line-height: var(--x24);
  letter-spacing: 0.02em;
  color: rgba(235, 221, 204, 0.65);
  text-align: center;
}