:root{
  --navy:#001b34;
  --navy2:#062d5c;
  --navy3:#0b478f;
  --red:#e51f2b;
  --red2:#ff2836;
  --text:#07162c;
  --muted:#526176;
  --line:#e7ecf3;
  --bg:#f3f6fa;
  --white:#fff;
  --shadow:0 22px 60px rgba(5,18,35,.12);
  --soft:0 12px 34px rgba(8,24,48,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 0%, rgba(0,46,100,.05), transparent 34%),
    linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%);
  line-height:1.55;
}
a{text-decoration:none;color:inherit}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:270px;
  background:linear-gradient(180deg,#061428 0%,#001b34 52%,#001124 100%);
  color:#fff;
  z-index:20;
  display:flex;
  flex-direction:column;
  padding:16px 8px 0;
  box-shadow:16px 0 48px rgba(0,20,45,.24);
}
.brand{
  width:212px;
  min-height:150px;
  margin:0 auto 22px;
  background:#fff;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  padding:12px;
}
.brand img{
  width:178px;
  max-height:128px;
  object-fit:contain;
  display:block;
}
.side-nav{display:flex;flex-direction:column;gap:8px}
.nav-link{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:14px;
  color:rgba(255,255,255,.92);
  border-radius:10px;
  padding:0 18px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:13px;
  border:1px solid transparent;
  transition:.18s ease;
}
.nav-link svg{font-size:21px}
.nav-link:hover,
.nav-link.active{
  background:rgba(255,255,255,.055);
  border-color:rgba(229,31,43,.42);
  color:#fff;
}
.nav-link.active{color:#ff3a43}
.nav-portal{
  border-color:rgba(30,115,215,.55);
  background:rgba(0,83,160,.14);
}
.side-graphic{
  margin-top:auto;
  opacity:.35;
  padding:20px 10px 34px;
}
.side-graphic svg{width:100%;height:auto;stroke:#5aa8ff;fill:none;stroke-width:2}

.mobile-toggle{display:none}

.page{
  margin-left:270px;
  padding:22px 36px 0;
  min-height:100vh;
}

.top-layout{
  display:grid;
  grid-template-columns:minmax(680px, 1.6fr) minmax(430px,.9fr);
  gap:28px;
  align-items:stretch;
}
.hero-card{
  position:relative;
  overflow:hidden;
  min-height:560px;
  border-radius:18px;
  background:#001c39;
  box-shadow:var(--shadow);
  isolation:isolate;
}
.hero-media{
  position:absolute;
  inset:0;
  background-image:url("rig-hero.jpg");
  background-size:cover;
  background-position:center right;
  transform:scale(1.02);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,20,42,.99) 0%, rgba(0,30,62,.94) 35%, rgba(0,36,72,.55) 61%, rgba(0,25,48,.55) 100%),
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.18), transparent 7%),
    radial-gradient(circle at 94% 93%, rgba(255,255,255,.12), transparent 11%);
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:780px;
  padding:58px 56px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 18px;
  border-radius:999px;
  background:rgba(255,255,255,.11);
  color:#d9e8ff;
  text-transform:uppercase;
  font-weight:900;
  font-size:12px;
  letter-spacing:.1em;
}
.hero-content h1{
  margin:30px 0 22px;
  color:#fff;
  font-size:clamp(44px,4.4vw,74px);
  line-height:.98;
  max-width:760px;
  letter-spacing:.01em;
  font-weight:950;
}
.hero-content p{
  color:#eaf3ff;
  font-size:18px;
  line-height:1.75;
  max-width:675px;
  margin:0 0 34px;
}
.hero-portals{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  max-width:620px;
}
.quick-card{
  background:#fff;
  color:var(--text);
  min-height:88px;
  border-radius:14px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:54px 1fr 20px;
  gap:14px;
  align-items:center;
  box-shadow:0 18px 38px rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.6);
  transition:.2s ease;
}
.quick-card:hover{transform:translateY(-4px);box-shadow:0 28px 50px rgba(0,0,0,.28)}
.quick-icon{
  width:52px;height:52px;border-radius:13px;
  background:linear-gradient(145deg,#001b34,#092f60);
  color:#fff;
  display:grid;place-items:center;
  font-size:26px;
}
.quick-card strong{
  display:block;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.04em;
  line-height:1.1;
}
.quick-card small{display:block;color:var(--muted);font-weight:700;margin-top:3px}
.quick-card b{font-size:34px;color:var(--red);font-weight:400}

.deliver-stack{
  display:grid;
  gap:20px;
}
.deliver-card{
  background:#fff;
  border-radius:15px;
  box-shadow:var(--soft);
  border:1px solid var(--line);
  padding:28px 30px;
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  align-items:center;
  min-height:118px;
}
.deliver-card.lead{min-height:150px}
.deliver-icon{
  width:64px;height:64px;
  border-radius:18px;
  display:grid;place-items:center;
  color:#fff;
  font-size:30px;
  box-shadow:0 18px 30px rgba(7,22,44,.14);
}
.deliver-icon.navy{background:linear-gradient(145deg,#001b34,#0a3975)}
.deliver-icon.red{background:linear-gradient(145deg,#de1421,#ff333d)}
.deliver-card h2,.deliver-card h3{
  margin:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#061a35;
  line-height:1.1;
}
.deliver-card h2{font-size:23px}
.deliver-card h3{font-size:18px}
.deliver-card p{margin:0;color:#20324b;font-size:15px}

.section-title{
  margin:34px auto 24px;
  text-align:center;
}
.section-title span{
  display:block;
  color:#405069;
  font-weight:850;
  font-size:13px;
}
.section-title h2{
  margin:4px 0 0;
  color:#05234a;
  font-size:30px;
  text-transform:uppercase;
  letter-spacing:.16em;
  position:relative;
}
.section-title h2::after{
  content:"";
  display:block;
  width:92px;height:3px;
  background:var(--red);
  margin:12px auto 0;
  border-radius:99px;
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.overview-card{
  background:#fff;
  border-radius:15px;
  border:1px solid var(--line);
  box-shadow:var(--soft);
  padding:28px 30px;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:22px;
  align-items:center;
}
.circle-icon{
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#001b34,#0c3974);
  color:#fff;
  font-size:35px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 12px 25px rgba(0,30,70,.16);
}
.overview-card h3{
  margin:0 0 8px;
  color:#041d3d;
  font-size:20px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.overview-card p{margin:0;color:#34465d;font-size:15px}

.systems-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-bottom:28px;
}
.system-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--soft);
  padding:28px;
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(300px,1fr);
  gap:26px;
  align-items:center;
  min-height:310px;
  overflow:hidden;
  position:relative;
}
.system-card::after{
  content:"";
  position:absolute;
  left:50%;
  top:48px;
  bottom:48px;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--red),transparent);
  opacity:.65;
}
.tag{
  display:inline-flex;
  padding:8px 16px;
  border-radius:999px;
  background:#edf4ff;
  color:#0a3975;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.system-card h3{
  margin:15px 0 10px;
  color:#021b3a;
  font-size:24px;
  letter-spacing:.04em;
}
.system-card p{margin:0 0 26px;color:#34465d;font-size:16px;line-height:1.7}
.button-primary{
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:48px;
  padding:0 22px;
  background:linear-gradient(145deg,#001b34,#052d5e);
  color:#fff;
  border-radius:8px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:0 14px 30px rgba(0,29,64,.24);
}
.button-primary svg{font-size:22px}
.button-primary span{font-size:26px;color:var(--red2)}
.button-primary:hover{filter:brightness(1.1)}

.visual-panel{
  min-height:235px;
  display:grid;
  place-items:center;
  position:relative;
}
.laptop{
  width:min(420px,100%);
  position:relative;
  filter:drop-shadow(0 24px 28px rgba(0,25,50,.18));
}
.screen{
  background:#f7fbff;
  border:8px solid #07162c;
  border-radius:8px 8px 3px 3px;
  min-height:175px;
  padding:14px 16px;
}
.screen-top{height:18px;display:flex;gap:6px;margin-bottom:10px}
.screen-top span{
  width:7px;height:7px;border-radius:50%;
  background:#b9c6d8;
}
.dash-title{font-weight:900;color:#0b1830;margin-bottom:10px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.kpis b{background:#eef3f8;border-radius:6px;text-align:center;padding:10px;color:#001b34;font-size:20px}
.bars{display:grid;gap:9px}
.bars i{display:block;height:8px;border-radius:99px;background:#20bd72}
.base{
  height:16px;
  width:112%;
  margin-left:-6%;
  border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#d6dde8,#9aa7b7);
}
.asset-dashboard{
  width:min(430px,100%);
  background:linear-gradient(145deg,#001b34,#061d3a);
  color:#fff;
  border-radius:9px;
  padding:18px;
  box-shadow:0 24px 35px rgba(0,25,60,.25);
  position:relative;
  overflow:hidden;
}
.panel-header{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:14px;margin-bottom:14px}
.panel-header span{width:46px;height:6px;border-radius:999px;background:#e8eef8}
.asset-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.asset-row span{color:#c9d7eb}.asset-row strong{color:#fff}
.mini-graph{
  height:70px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-top:20px;
  padding-right:80px;
}
.mini-graph i{
  display:block;
  width:24px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#36cc83,#13724f);
}
.donut{
  position:absolute;
  right:26px;
  bottom:26px;
  width:72px;height:72px;border-radius:50%;
  background:conic-gradient(#22c55e 0 65%,#f59e0b 65% 84%,#ef4444 84% 100%);
}
.donut span{
  position:absolute;
  inset:18px;
  background:#061d3a;
  border-radius:50%;
}

.cta-band{
  margin:24px 0 0;
  min-height:110px;
  border-radius:16px;
  background:
    linear-gradient(90deg,#001b34 0%,#062b57 70%,#0b3d78 100%);
  color:#fff;
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:22px;
  align-items:center;
  padding:24px 32px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:"";
  position:absolute;
  inset:auto 0 0 auto;
  width:420px;height:100%;
  opacity:.18;
  background:repeating-linear-gradient(90deg,transparent 0 22px, rgba(255,255,255,.22) 22px 23px);
}
.cta-icon{
  width:64px;height:64px;border-radius:16px;
  background:rgba(255,255,255,.1);
  display:grid;place-items:center;
  font-size:30px;
}
.cta-band h2{margin:0;text-transform:uppercase;letter-spacing:.05em;font-size:24px}
.cta-band p{margin:4px 0 0;color:#dceaff}
.cta-button{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:54px;
  padding:0 28px;
  background:var(--red);
  border-radius:8px;
  font-weight:950;
  text-transform:uppercase;
  box-shadow:0 16px 30px rgba(229,31,43,.24);
}
.cta-button span{font-size:28px}

.footer{
  margin:28px -36px 0;
  background:#001326;
  color:#dce9f8;
  display:grid;
  grid-template-columns:1.3fr .8fr .9fr 1.25fr;
  gap:44px;
  padding:44px 58px 34px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer img{
  width:142px;
  background:#fff;
  border-radius:10px;
  padding:10px;
  margin-bottom:14px;
}
.footer h4{
  color:#fff;
  margin:0 0 15px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.footer a,.footer p{
  display:block;
  margin:0 0 10px;
  color:#c8d8eb;
  font-size:14px;
}
.footer a:hover{color:#fff}

@media (max-width:1500px){
  .top-layout{grid-template-columns:1fr}
  .deliver-stack{grid-template-columns:repeat(2,1fr)}
  .deliver-card.lead{grid-column:1/-1}
}
@media (max-width:1180px){
  .page{margin-left:0;padding:84px 20px 0}
  .sidebar{transform:translateX(-100%);transition:.25s ease}
  .sidebar.open{transform:translateX(0)}
  .mobile-toggle{
    display:grid;
    position:fixed;
    top:18px;left:18px;
    z-index:30;
    width:50px;height:50px;
    border:0;border-radius:12px;
    background:#001b34;
    place-items:center;
    box-shadow:0 12px 30px rgba(0,0,0,.24);
  }
  .mobile-toggle span{display:block;width:24px;height:2px;background:#fff}
  .overview-grid,.systems-grid,.deliver-stack{grid-template-columns:1fr}
  .system-card{grid-template-columns:1fr}
  .system-card::after{display:none}
  .footer{margin-left:-20px;margin-right:-20px;grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hero-content{padding:34px 22px}
  .hero-content h1{font-size:36px}
  .hero-content p{font-size:16px}
  .hero-portals{grid-template-columns:1fr}
  .deliver-card,.overview-card{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr;padding:36px 24px}
  .section-title h2{font-size:22px}
}